:root{
  --font-ui:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-brand:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --bg:#f7f7fa;--ink:#20202a;--secondary:#666878;--subtle:#8b8b99;--panel:#ffffff;--raised:#ffffff;
  --header:rgba(255,255,255,.89);--line:#e9e7ee;--field:#f8f8fb;--field-border:#e7e6ed;
  --purple:#7345e8;--purple-hover:#6435d2;--purple-soft:#f0eafd;--purple-ink:#6635d3;
  --shadow:0 18px 58px rgba(48,38,77,.065),0 3px 12px rgba(48,38,77,.025);
  color-scheme:light;
}
:root[data-theme='dark']{
  --bg:#202020;--ink:#f4f4f6;--secondary:#b1b1b9;--subtle:#96969e;--panel:#292929;--raised:#303030;
  --header:rgba(32,32,32,.92);--line:#3b3b3e;--field:#343434;--field-border:#444448;
  --purple:#9b77f5;--purple-hover:#a98afb;--purple-soft:#3d3251;--purple-ink:#c2aafa;
  --shadow:0 20px 58px rgba(0,0,0,.17),0 4px 16px rgba(0,0,0,.1);
  color-scheme:dark;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .24s ease,color .24s ease}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.65;cursor:wait}a{color:inherit;text-decoration:none}svg{display:block}button:focus-visible,a:focus-visible,input:focus-visible,[role='option']:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px}button{-webkit-tap-highlight-color:transparent}.content-width{width:min(100% - 48px,1080px);margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:var(--header);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--line)}.header-inner{max-width:1200px;margin:auto;padding:0 36px;height:78px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}.brand-icon{width:39px;height:39px;display:grid;place-items:center;background:#7548e9;border-radius:13px;color:#fff;flex:none}.brand-icon svg{width:29px;height:29px}.brand-text{font:800 29px/1 var(--font-brand);letter-spacing:-1.6px}.brand-dot{color:var(--purple)}.top-links{display:flex;align-items:center;gap:28px}.nav-link{font-weight:700;font-size:15px;color:var(--secondary);transition:color .18s}.nav-link:hover{color:var(--ink)}.support-nav{background:#7345e8;color:white;display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;min-height:43px;padding:0 18px;font-weight:800;font-size:14px;transition:transform .2s ease,background .2s}.support-nav:hover{background:#6536d6;transform:translateY(-1px)}.support-nav svg{width:17px;height:17px}.theme-toggle{width:44px;height:44px;display:grid;place-items:center;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:15px;transition:background .2s,transform .2s}.theme-toggle:hover{background:var(--purple-soft);transform:translateY(-1px)}.theme-toggle svg{width:22px;height:22px}
.hero{position:relative;padding:88px 0 112px;text-align:center;isolation:isolate}.hero::before{content:'';position:absolute;z-index:-1;top:0;left:50%;transform:translateX(-50%);width:min(850px,100vw);height:530px;background:radial-gradient(ellipse at 50% 25%,rgba(155,114,249,.095) 0,rgba(155,114,249,.04) 36%,transparent 74%);pointer-events:none}:root[data-theme='dark'] .hero::before{background:radial-gradient(ellipse at 50% 25%,rgba(144,100,251,.10),transparent 73%)}.hero-eyebrow{display:inline-flex;gap:9px;align-items:center;background:var(--purple-soft);border:1px solid color-mix(in srgb,var(--purple) 12%,transparent);color:var(--purple-ink);padding:9px 15px;border-radius:999px;font-size:14px;font-weight:800;margin-bottom:24px}.eyebrow-orb{width:7px;height:7px;border-radius:50%;background:var(--purple)}.hero h1{font-family:var(--font-brand);font-size:clamp(39px,5.8vw,64px);font-weight:800;line-height:1.16;letter-spacing:-2.8px;max-width:950px;margin:0 auto 18px}.purple-text{color:var(--purple)}.hero-desc{font-size:clamp(16px,2vw,19px);color:var(--secondary);line-height:1.65;max-width:600px;margin:0 auto 38px}
.converter-card{text-align:left;width:min(100%,810px);margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:31px;box-shadow:var(--shadow)}.control-heading{display:block;font-size:15px;font-weight:800;letter-spacing:-.1px;margin:0 0 11px;color:var(--ink)}.url-field{width:100%;display:flex;align-items:center;gap:14px;padding:9px 10px 9px 18px;min-height:66px;background:var(--field);border:1.5px solid var(--field-border);border-radius:19px;transition:border .2s,box-shadow .2s}.url-field:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px color-mix(in srgb,var(--purple) 11%,transparent)}.input-link-icon{width:23px;height:23px;flex:none;color:var(--subtle)}.url-field input{flex:1;min-width:0;width:100%;font-size:16px;font-weight:500;letter-spacing:-.15px;border:0;background:transparent;color:var(--ink);outline:0}.url-field input::placeholder{color:var(--subtle)}.paste-button{min-height:43px;display:inline-flex;gap:7px;align-items:center;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:800;font-size:14px;padding:0 14px;border-radius:13px}.paste-button:hover{border-color:var(--purple)}.paste-button svg{width:17px;height:17px;color:var(--purple)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:25px}.field-group{position:relative;min-width:0}.native-state-select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.dropdown-trigger{display:flex;width:100%;min-height:62px;align-items:center;text-align:left;gap:12px;padding:0 17px;background:var(--field);color:var(--ink);border:1.5px solid var(--field-border);border-radius:18px;transition:border-color .2s,background .2s,box-shadow .2s}.dropdown-trigger:hover{border-color:var(--purple)}.dropdown-trigger[aria-expanded='true']{border-color:var(--purple);box-shadow:0 0 0 4px color-mix(in srgb,var(--purple) 10%,transparent)}.dropdown-leading-icon{width:27px;height:27px;display:grid;place-items:center;color:var(--purple);flex:none}.dropdown-leading-icon svg{width:23px;height:23px}.dropdown-value{font-size:16px;font-weight:800;flex:1}.chevron{width:19px;height:19px;color:var(--secondary);transition:transform .2s}.dropdown-trigger[aria-expanded='true'] .chevron{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;max-height:310px;overflow-y:auto;overscroll-behavior:contain;border-radius:18px;padding:7px;background:var(--raised);border:1px solid var(--line);box-shadow:0 15px 44px rgba(0,0,0,.17)}.dropdown-menu[hidden]{display:none!important}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;min-height:48px;border-radius:12px;cursor:pointer;font-size:15px;font-weight:700;user-select:none}.dropdown-option:hover,.dropdown-option.is-active{background:var(--purple-soft);color:var(--purple-ink)}.dropdown-option[aria-selected='true']{color:var(--purple-ink)}.dropdown-option .check{width:18px;height:18px;display:none}.dropdown-option[aria-selected='true'] .check{display:block}
.convert-button{margin-top:25px;min-height:62px;width:100%;display:flex;align-items:center;justify-content:center;gap:13px;border:0;border-radius:18px;background:#7345e8;color:#fff;font-size:18px;letter-spacing:-.2px;font-weight:800;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 8px 18px rgba(115,69,232,.14)}.convert-button:hover:not(:disabled){background:#6535d7;transform:translateY(-1px);box-shadow:0 11px 24px rgba(115,69,232,.2)}.convert-button svg{width:20px;height:20px}.inline-info{min-height:25px;margin-top:13px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--secondary);font-size:14px;font-weight:600;line-height:1.5}.inline-info.has-message{padding:5px 8px;border-radius:12px}.inline-info[data-kind='error']{color:#d04d6c}.inline-info[data-kind='success']{color:#309d68}.result-card{border-top:1px solid var(--line);margin-top:7px;padding-top:25px}.result-card[hidden]{display:none!important}.result-heading{display:flex;align-items:center;gap:15px}.result-check{display:grid;place-items:center;background:var(--purple-soft);color:var(--purple-ink);width:52px;height:52px;font-size:25px;font-weight:800;border-radius:17px}.result-heading h2{font:800 21px/1.25 var(--font-brand);margin:0 0 4px}.result-heading p{margin:0;color:var(--secondary);font-size:15px}.result-actions{display:flex;gap:12px;margin-top:19px}.download-button,.again-button{min-height:50px;display:flex;align-items:center;justify-content:center;border-radius:15px;font-size:15px;font-weight:800;padding:0 20px}.download-button{background:#7345e8;color:white;gap:10px}.download-button svg{width:19px;height:19px}.again-button{border:1px solid var(--line);background:var(--field);color:var(--ink)}
.support-card{width:min(100%,810px);min-height:108px;margin:18px auto 0;background:#7345e8;border-radius:23px;padding:22px 24px;display:flex;align-items:center;gap:17px;color:#fff;text-align:left}.support-icon{width:48px;height:48px;display:grid;place-items:center;background:rgba(255,255,255,.16);border-radius:17px;flex:none}.support-icon svg{width:25px;height:25px}.support-copy{flex:1}.support-copy strong{font-family:var(--font-brand);font-weight:800;font-size:17px;letter-spacing:-.2px}.support-copy p{margin:3px 0 0;color:rgba(255,255,255,.89);font-size:14px;line-height:1.45}.support-share{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.16);color:#fff;min-height:45px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;border-radius:14px;font-weight:800;font-size:14px}.support-share:hover{background:rgba(255,255,255,.24)}.support-share svg{width:17px;height:17px}
.ad-slot{margin:0 auto 40px;width:min(100% - 48px,810px);min-height:100px;border:1px dashed var(--line);border-radius:16px;text-align:center;padding:15px;color:var(--subtle);font-size:12px}.ad-slot[hidden]{display:none}
.lower-wrap{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.info{padding:92px 0 65px}.section-intro{text-align:center;margin-bottom:34px}.section-label{color:var(--purple-ink);font-size:13px;letter-spacing:1.5px;font-weight:800}.section-intro h2{font-family:var(--font-brand);font-size:clamp(29px,4vw,39px);letter-spacing:-1.45px;line-height:1.25;margin:10px 0 8px}.section-intro p{margin:0;font-size:17px;color:var(--secondary)}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.step-card{min-height:239px;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--bg)}.step-number{display:block;color:var(--subtle);font-size:14px;font-weight:800;margin-bottom:18px}.step-icon{width:49px;height:49px;display:grid;place-items:center;color:var(--purple);background:var(--purple-soft);border-radius:17px;margin-bottom:19px}.step-icon svg{width:25px;height:25px}.step-card h3{font-family:var(--font-brand);font-size:19px;letter-spacing:-.55px;margin:0 0 6px;font-weight:800}.step-card p{font-size:15px;line-height:1.55;color:var(--secondary);margin:0}.faq-section{max-width:820px;padding:55px 0 105px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:75px;padding:17px 3px;font-size:17px;font-weight:800;cursor:pointer}.faq-list summary::-webkit-details-marker{display:none}.faq-list p{font-size:16px;line-height:1.65;color:var(--secondary);margin:0;padding:0 28px 22px 3px}.plus-icon{font-weight:400;font-size:27px;color:var(--purple);transition:transform .2s}.faq-list details[open] .plus-icon{transform:rotate(45deg)}
.site-footer{background:var(--bg)}.footer-inner{padding:53px 0 38px;display:flex;justify-content:space-between;gap:24px}.footer-brand{font-family:var(--font-brand);font-size:25px;letter-spacing:-1.2px;font-weight:800}.footer-brand span{color:var(--purple)}.footer-identity p{margin:7px 0 0;color:var(--secondary);font-size:15px}.footer-links{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}.footer-links a{font-size:15px;color:var(--secondary);font-weight:700}.footer-links a:hover{color:var(--purple)}.footer-bottom{border-top:1px solid var(--line);padding:22px 0 30px;display:flex;justify-content:space-between;gap:16px;color:var(--subtle);font-size:13px;font-weight:600}
.legal-main{padding:80px 0 115px;min-height:58vh;max-width:760px}.legal-main h1{font-family:var(--font-brand);font-size:clamp(36px,5vw,48px);letter-spacing:-1.9px;line-height:1.15;margin:0 0 20px}.legal-main p{font-size:17px;line-height:1.8;color:var(--secondary)}.legal-warning{padding:24px;background:var(--purple-soft);border-radius:22px;color:var(--ink)!important}
@media(max-width:860px){.top-links{gap:17px}.header-inner{padding-inline:24px}.hero{padding-top:69px}.hero h1{letter-spacing:-2px}.step-card{padding:20px}}
@media(max-width:640px){.content-width{width:min(100% - 32px,1080px)}.header-inner{height:69px;padding:0 17px}.brand{gap:9px}.brand-icon{height:35px;width:35px;border-radius:12px}.brand-icon svg{width:26px;height:26px}.brand-text{font-size:25px}.top-links{gap:9px}.nav-link{display:none}.support-nav{min-height:39px;font-size:13px;padding:0 13px;gap:6px}.support-nav svg{width:14px;height:14px}.theme-toggle{width:40px;height:40px;border-radius:13px}.theme-toggle svg{width:21px;height:21px}.hero{padding:53px 0 70px}.hero-eyebrow{margin-bottom:21px;font-size:12px;padding:9px 12px}.hero h1{font-size:clamp(34px,8.5vw,47px);line-height:1.18;letter-spacing:-1.6px}.desktop-break{display:none}.hero-desc{font-size:16px;line-height:1.55;margin:14px auto 27px;max-width:400px}.converter-card{border-radius:26px;padding:19px 17px 15px}.control-heading{font-size:14px;margin-bottom:9px}.url-field{min-height:60px;padding:7px 7px 7px 13px;gap:9px;border-radius:16px}.input-link-icon{width:20px;height:20px}.url-field input{font-size:16px}.paste-button{min-height:42px;padding:0 10px;font-size:13px;border-radius:12px}.paste-button svg{width:16px}.settings-grid{gap:12px;margin-top:19px}.dropdown-trigger{min-height:58px;padding:0 12px;gap:8px;border-radius:16px}.dropdown-leading-icon{width:22px}.dropdown-leading-icon svg{width:21px;height:21px}.dropdown-value{font-size:15px}.chevron{width:17px;height:17px}.dropdown-menu{border-radius:16px}.dropdown-option{min-height:49px;font-size:15px}.convert-button{min-height:59px;border-radius:16px;font-size:17px;margin-top:21px}.inline-info{font-size:13px;min-height:23px}.support-card{border-radius:21px;margin-top:14px;padding:18px;min-height:110px;gap:11px;flex-wrap:wrap}.support-icon{width:43px;height:43px;border-radius:14px}.support-copy{min-width:calc(100% - 60px)}.support-copy strong{font-size:16px}.support-copy p{font-size:13px}.support-share{width:100%;margin-top:4px}.result-heading h2{font-size:18px}.result-heading p{font-size:14px}.result-actions{flex-direction:column}.step-grid{grid-template-columns:1fr;gap:12px}.info{padding:68px 0 36px}.step-card{min-height:0;padding:21px 22px}.step-number{margin-bottom:6px}.step-icon{margin:0 0 13px}.step-card p{font-size:15px}.faq-section{padding:45px 0 75px}.section-intro h2{letter-spacing:-1px}.section-intro p{font-size:16px}.faq-list summary{font-size:16px;min-height:71px}.faq-list p{font-size:15px}.footer-inner{padding:42px 0 29px;display:block}.footer-links{margin-top:26px;gap:13px 23px}.footer-bottom{padding:21px 0 29px;flex-direction:column;gap:6px}.legal-main{padding:60px 0 90px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}


/* Riplet v3 - compact, conversion-first hero layout */
.coffee-icon{display:block;object-fit:contain;filter:invert(1);flex:none}
.coffee-icon-nav{width:20px;height:20px}
.coffee-icon-banner{width:25px;height:25px}
.support-nav{gap:9px}
.hero{padding-top:clamp(26px,4vh,38px);padding-bottom:clamp(32px,5vh,55px)}
.hero h1{font-size:clamp(31px,4.5vw,54px);line-height:1.17;letter-spacing:-1.9px;max-width:900px;margin:0 auto 24px;text-wrap:balance}
.converter-card{padding:24px;border-radius:28px}
.control-heading{margin-bottom:8px}
.settings-grid{margin-top:17px}
.url-field{min-height:56px}
.dropdown-trigger{min-height:53px}
.convert-button{margin-top:18px;min-height:55px}
.inline-info:not(.has-message){display:none}
.inline-info.has-message{margin-top:10px;min-height:24px}
.support-card{min-height:76px;margin-top:12px;padding:13px 18px;border-radius:21px;gap:12px}
.support-icon{width:42px;height:42px;border-radius:14px}
.support-copy strong{font-size:17px}
.support-copy p{font-size:14px;margin-top:1px}
.support-share{min-height:42px}
.section-intro h2{margin:0}
.step-card p{font-size:15px}
/* Reserve viewport space for the full first-screen action area on larger screens. */
@media (min-width:641px) and (min-height:740px){
  .hero{min-height:calc(100dvh - 78px);display:flex;flex-direction:column;justify-content:center}
}
@media(max-width:640px){
  .header-inner{height:62px}
  .brand-icon{width:32px;height:32px}
  .brand-text{font-size:24px}
  .support-nav{min-height:36px;padding:0 11px;font-size:13px}
  .coffee-icon-nav{width:17px;height:17px}
  .theme-toggle{width:37px;height:37px}
  .hero{padding:clamp(18px,3.5dvh,26px) 0 27px}
  .hero h1{font-size:clamp(29px,7.2vw,36px);line-height:1.2;letter-spacing:-1.3px;margin-bottom:19px}
  .converter-card{border-radius:24px;padding:16px}
  .control-heading{font-size:14px;margin-bottom:6px}
  .url-field{min-height:53px;padding:5px 6px 5px 11px}
  .paste-button{min-height:39px;font-size:14px}
  .settings-grid{margin-top:14px;gap:10px}
  .dropdown-trigger{min-height:50px;gap:7px;padding:0 10px}
  .dropdown-leading-icon svg{width:20px;height:20px}
  .dropdown-value{font-size:15px}
  .convert-button{min-height:51px;margin-top:15px;font-size:17px}
  .support-card{min-height:68px;padding:10px 12px;gap:9px;flex-wrap:nowrap;margin-top:11px;border-radius:19px}
  .support-icon{height:37px;width:37px;border-radius:12px}
  .coffee-icon-banner{width:23px;height:23px}
  .support-copy{min-width:0;flex:1}
  .support-copy strong{font-size:15px}
  .support-copy p{font-size:12px;line-height:1.25;margin-top:2px}
  .support-share{width:auto;margin:0;padding:0 11px;min-height:38px;font-size:13px;gap:5px}
  .support-share svg{width:14px;height:14px}
  .info{padding-top:58px}
}
@media(max-width:380px){
  .content-width{width:calc(100% - 24px)}
  .hero h1{font-size:28px}
  .support-copy p{font-size:11px}
  .support-share{padding:0 9px}
}
@media(max-width:640px) and (max-height:750px){
  .hero{padding-top:14px}
  .hero h1{margin-bottom:13px;font-size:28px}
  .converter-card{padding:13px}
  .settings-grid{margin-top:11px}
  .convert-button{margin-top:11px}
  .support-card{margin-top:9px}
}

/* Riplet v4: responsive micro-interactions, compact Rip! action and Ko-fi card */
:root{--press-duration:125ms}
.hero h1,.converter-card,.support-card{animation:rise-fade .44s cubic-bezier(.2,.75,.2,1) both}
.converter-card{animation-delay:70ms}.support-card{animation-delay:135ms}
@keyframes rise-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes menu-pop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes result-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.dropdown-menu:not([hidden]){animation:menu-pop 155ms cubic-bezier(.2,.75,.2,1) both;transform-origin:top center}
.result-card:not([hidden]),.inline-info.has-message{animation:result-in 200ms ease both}
/* The selected link-field ring is 3px thicker than before (4px -> 7px). */
.url-field:focus-within{border-color:var(--purple);box-shadow:0 0 0 7px color-mix(in srgb,var(--purple) 13%,transparent)}
/* All interactive elements have a shared, tactile press-down state and subtle fades. */
button,a,summary,.dropdown-option{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease,transform var(--press-duration) cubic-bezier(.2,.7,.1,1)}
button:active:not(:disabled),.support-nav:active,.support-card:active,.dropdown-option:active,.nav-link:active,.footer-links a:active,.brand:active,.footer-brand:active,.download-button:active,.again-button:active{transform:translateY(2px) scale(.973)!important}
.theme-toggle:active:not(:disabled){transform:translateY(2px) scale(.92)!important}
button:disabled{cursor:wait;opacity:.78}
/* Rip! takes roughly one-third of its former full width, with +7px rounding. */
.convert-button{width:33.333%;min-width:122px;max-width:205px;margin-left:auto;margin-right:auto;border-radius:25px;gap:10px}
.convert-button:active:not(:disabled){box-shadow:0 2px 10px rgba(115,69,232,.13)}
.rip-icon{display:block;width:18px;height:18px;filter:invert(1);flex:none;transition:transform .25s ease}
.convert-button:hover:not(:disabled) .rip-icon{transform:rotate(34deg)}
.convert-button[aria-busy='true'] .rip-icon{animation:rip-spin 1.2s linear infinite}
@keyframes rip-spin{to{transform:rotate(360deg)}}
/* Ko-fi link replaces the "Enjoying Riplet?" content. The whole banner is clickable. */
.support-card{cursor:pointer}
.support-card:hover{background:#6638dc;box-shadow:0 12px 27px rgba(115,69,232,.17)}
.support-copy{display:block;min-width:0}
.support-copy strong{display:block}
.support-caption{display:block;color:rgba(255,255,255,.88);font-size:14px;margin-top:2px;line-height:1.35}
.support-share{transition:background .18s ease,transform .13s ease}
.support-card:hover .support-share{background:rgba(255,255,255,.25)}
@media(max-width:640px){
 .convert-button{width:33.333%;min-width:122px;max-width:none;border-radius:23px}
 .rip-icon{width:16px;height:16px}
 .support-card{min-height:68px}
 .support-caption{font-size:12px;line-height:1.25;margin-top:2px}
 .support-share{flex:none}
}
@media(max-width:370px){.support-share{font-size:12px;padding:0 8px}.support-copy strong{font-size:14px}.support-caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero h1,.converter-card,.support-card,.dropdown-menu:not([hidden]),.result-card:not([hidden]),.inline-info.has-message,.convert-button[aria-busy='true'] .rip-icon{animation:none!important}}


/* Riplet v4.1: format + quality occupy 0-50%; Rip! occupies 75-100%.
   The whole row is the same width as the URL input above it. */
.conversion-controls-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:0;
  align-items:end;
  margin-top:17px;
  width:100%;
}
.conversion-controls-row .settings-grid{
  grid-column:1 / span 2;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0;
  min-width:0;
}
.conversion-controls-row .convert-button{
  grid-column:4;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  min-height:53px;
  border-radius:25px;
}
.conversion-controls-row .field-group{min-width:0}
.conversion-controls-row .dropdown-trigger{width:100%;min-width:0}
.conversion-controls-row .dropdown-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){
  .conversion-controls-row{margin-top:14px}
  .conversion-controls-row .settings-grid{gap:8px}
  .conversion-controls-row .convert-button{min-height:50px;border-radius:23px;padding:0 3px;gap:5px;font-size:15px}
  .conversion-controls-row .dropdown-trigger{padding:0 6px;gap:4px;min-height:50px}
  .conversion-controls-row .dropdown-leading-icon{display:none}
  .conversion-controls-row .dropdown-value{font-size:13px}
  .conversion-controls-row .chevron{width:12px;height:12px;flex:none}
  .conversion-controls-row .field-group .control-heading{
    font-size:12px;line-height:1.15;min-height:28px;display:flex;align-items:flex-end;
    margin-bottom:6px;overflow-wrap:break-word;
  }
}
@media(max-width:380px){
  .conversion-controls-row .settings-grid{gap:5px}
  .conversion-controls-row .dropdown-trigger{padding:0 4px;gap:2px}
  .conversion-controls-row .dropdown-value{font-size:12px}
  .conversion-controls-row .convert-button{font-size:14px;gap:3px}
  .conversion-controls-row .rip-icon{width:14px;height:14px}
}
@media(max-width:640px) and (max-height:750px){.conversion-controls-row{margin-top:11px}.conversion-controls-row .convert-button{margin-top:0}}
/* Keep selector popovers above the support banner (each card animates on its own stacking context). */
.converter-card{position:relative;z-index:2}
.support-card{position:relative;z-index:1}

/* v4.2: New flat chain identity, including a crisp full-bleed top-bar mark. */
.brand-icon{background:transparent;border-radius:12px;overflow:hidden;width:40px;height:40px;flex:none}
.brand-icon img{width:100%;height:100%;display:block;object-fit:cover}
/* Mobile conversion screen fills the visible area below the sticky topbar.
   On shorter devices, min-height permits content to overflow without clipping. */
@media(max-width:640px){
  .hero{
    min-height:calc(100svh - 62px);
    min-height:calc(100dvh - 62px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:clamp(14px,3vh,34px);
    padding-bottom:clamp(14px,3vh,34px);
  }
  .hero h1{flex:none}
  .converter-card{flex:none}
  .support-card{flex:none}
  .brand-icon{width:34px;height:34px;border-radius:10px}
}
@media(max-width:640px) and (max-height:690px){
  .hero{padding-top:12px;padding-bottom:12px}
  .hero h1{margin-bottom:12px}
  .support-card{margin-top:9px}
}