/* ---- reset & base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
/* clip fallback: some mobile browsers ignore overflow:clip — hidden still kills the h-scroll */
@supports not (overflow:clip){html,body{overflow-x:hidden}}
body{overflow-x:clip}
[hidden]{display:none!important}
body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));
  font-family:var(--font-sans);font-size:var(--text-base);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}

/* ---- atmospheric background radial ---- */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%,hsl(var(--accent) / .06),transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%,hsl(var(--primary) / .07),transparent 60%)}

/* ---- layout ---- */
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}

/* ---- typography ---- */
h1{font-family:var(--font-sans);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(var(--text-xl),5vw,var(--text-2xl));margin:.15em 0;
  background:linear-gradient(135deg,hsl(var(--foreground)) 0%,hsl(var(--foreground) / .75) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2{font-family:var(--font-sans);font-weight:700;letter-spacing:-.025em;line-height:1.15;
  font-size:clamp(var(--text-lg),3vw,var(--text-xl));margin:.15em 0 .5em}
h3{font-family:var(--font-sans);font-weight:600;letter-spacing:-.015em;line-height:1.3;
  font-size:var(--text-base);margin:0 0 .4em}
.lead{color:hsl(var(--muted-foreground));max-width:58ch;font-size:clamp(var(--text-base),2vw,var(--text-md));
  line-height:1.7}
/* links: sky (--primary, brand accent) everywhere; components override locally */
a{color:hsl(var(--primary));text-decoration-color:hsl(var(--primary) / .4);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}

.eyebrow{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:var(--text-xs);color:hsl(var(--accent));
  display:inline-flex;align-items:center;gap:var(--space-2)}
.eyebrow::before{content:"";display:inline-block;width:20px;height:2px;
  background:hsl(var(--accent));border-radius:1px;flex-shrink:0}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:5;
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  background:hsl(var(--background) / .82);
  border-bottom:1px solid hsl(var(--border) / .6);
  box-shadow:0 1px 0 hsl(var(--shadow-color) / .04),
             0 4px 16px hsl(var(--shadow-color) / .06)}
.bar{display:flex;align-items:center;justify-content:space-between;padding-block:12px}
.brand{font-family:var(--font-sans);font-weight:800;font-size:1.12rem;letter-spacing:-.03em;
  color:hsl(var(--foreground));text-decoration:none;
  transition:opacity var(--transition-fast) var(--ease-out)}
.brand:hover{opacity:.75}
.brand-tagline{display:block;white-space:nowrap;color:inherit;font-size:inherit;font-weight:inherit;line-height:1}
@media(min-width:480px){.brand-tagline{display:inline}}

/* ---- topbar actions: lang switcher + theme toggle ---- */
.bar-actions{display:flex;align-items:center;gap:var(--space-3)}

.switcher{display:inline-flex;align-items:center;gap:var(--space-1);
  background:hsl(var(--muted));border-radius:var(--radius);padding:3px}
.lang{padding:4px 10px;border-radius:calc(var(--radius) - 2px);font-size:var(--text-sm);
  font-weight:600;color:hsl(var(--muted-foreground));text-decoration:none;
  transition:color var(--transition-fast) var(--ease-out),
             background var(--transition-fast) var(--ease-out),
             transform var(--transition-fast) var(--ease-out)}
.lang:hover{color:hsl(var(--foreground));background:hsl(var(--background) / .7);
  transform:translateY(-1px)}
.lang.is-active{color:hsl(var(--accent));font-weight:700;
  background:hsl(var(--background));
  box-shadow:0 1px 4px hsl(var(--shadow-color) / .12)}

.theme-toggle{background:hsl(var(--muted));border:1px solid hsl(var(--border));
  border-radius:var(--radius);color:hsl(var(--muted-foreground));padding:6px 10px;
  font-size:1rem;line-height:1;cursor:pointer;
  transition:color var(--transition-fast) var(--ease-out),
             border-color var(--transition-fast) var(--ease-out),
             background var(--transition-fast) var(--ease-out),
             transform var(--transition-fast) var(--ease-out)}
.theme-toggle:hover{color:hsl(var(--foreground));border-color:hsl(var(--accent));
  background:hsl(var(--accent) / .08);transform:translateY(-1px)}
.theme-toggle:active{transform:translateY(0)}

/* ---- footer ---- */
.foot{border-top:1px solid hsl(var(--border) / .6);color:hsl(var(--muted-foreground));
  font-size:var(--text-sm);padding:var(--space-5) 0;
  background:linear-gradient(0deg,hsl(var(--muted) / .5),transparent)}

/* ---- brief form intro ---- */
.intro{position:relative;padding:var(--space-7) 0 var(--space-5)}
.intro::before{content:"";position:absolute;inset:-40px -200px auto -200px;height:320px;z-index:-1;
  background:radial-gradient(50% 80% at 70% 0%,hsl(var(--accent) / .12),transparent 70%)}

/* ---- form base ---- */
form{display:grid;gap:var(--space-5);padding-bottom:var(--space-8)}
.card{background:hsl(var(--card));
  border:1px solid hsl(var(--border) / .7);
  border-radius:var(--radius-lg);
  box-shadow:
    0 1px 0 hsl(var(--primary-foreground) / .6) inset,
    0 2px 4px hsl(var(--shadow-color) / .04),
    0 8px 24px hsl(var(--shadow-color) / .06);
  padding:var(--space-5) var(--space-6);margin:0}
legend{font-family:var(--font-sans);font-weight:700;font-size:var(--text-md);
  letter-spacing:-.015em;padding-inline:var(--space-2);margin-inline-start:calc(-1 * var(--space-2))}
legend small{color:hsl(var(--muted-foreground));font-weight:400;font-family:var(--font-sans);
  font-size:var(--text-sm)}

/* ---- form fields ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-4) 0 0}
.field:first-child{margin-top:var(--space-2)}
.field>span{font-size:var(--text-sm);font-weight:600;color:hsl(var(--foreground))}
.field em{color:hsl(var(--accent));font-style:normal}
.field small{color:hsl(var(--muted-foreground));font-weight:400;font-size:var(--text-xs)}
input,select,textarea{width:100%;padding:11px 14px;font:inherit;font-size:var(--text-base);
  color:hsl(var(--foreground));
  background:hsl(var(--secondary));
  border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) + 2px);
  transition:border-color var(--transition-base) var(--ease-out),
             box-shadow var(--transition-base) var(--ease-out)}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:hsl(var(--muted-foreground) / .7)}
input:focus,select:focus,textarea:focus{outline:none;
  border-color:hsl(var(--ring));
  box-shadow:0 0 0 3px hsl(var(--ring) / .18),
             0 1px 4px hsl(var(--shadow-color) / .06)}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:hsl(0 70% 55%)}

/* ---- repeat rows ---- */
.repeat{display:grid;gap:var(--space-4)}
.item{border:1px solid hsl(var(--border));border-radius:var(--radius-lg);padding:var(--space-4);
  background:hsl(var(--secondary));position:relative}
.item .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.item .rm{position:absolute;top:var(--space-2);inset-inline-end:var(--space-2);
  border:0;background:transparent;color:hsl(var(--muted-foreground));cursor:pointer;
  font-size:1.1rem;line-height:1;padding:var(--space-1);
  border-radius:var(--radius-sm);
  transition:color var(--transition-fast) var(--ease-out),
             background var(--transition-fast) var(--ease-out)}
.item .rm:hover{color:hsl(0 70% 50%);background:hsl(0 70% 50% / .08)}
.rating{max-width:120px}

/* ---- buttons ---- */
button{font:inherit;cursor:pointer}
.ghost{margin-top:var(--space-4);background:transparent;
  border:1px dashed hsl(var(--border));
  color:hsl(var(--accent));padding:10px var(--space-4);border-radius:var(--radius);
  font-weight:600;font-family:var(--font-sans);
  transition:border-color var(--transition-base) var(--ease-out),
             background var(--transition-base) var(--ease-out),
             transform var(--transition-fast) var(--ease-out)}
.ghost:hover{border-color:hsl(var(--accent));background:hsl(var(--accent) / .06);
  transform:translateY(-1px)}
.ghost:active{transform:translateY(0)}
.ghost[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-1)}

/* primary button — liquid glass treatment */
.primary{padding:13px var(--space-7);
  border:1px solid hsl(var(--primary-foreground) / .2);
  border-radius:var(--radius-lg);
  color:hsl(var(--primary-foreground));font-weight:700;
  font-family:var(--font-sans);font-size:var(--text-base);
  letter-spacing:-.01em;
  background:linear-gradient(180deg,
    hsl(var(--primary)),
    hsl(var(--primary) / .82));
  box-shadow:
    inset 0 1px 0 hsl(var(--primary-foreground) / .28),
    inset 0 -1px 0 hsl(var(--primary) / .4),
    0 6px 20px hsl(var(--glow-primary) / .32),
    0 2px 4px hsl(var(--shadow-color) / .12);
  transition:transform var(--transition-base) var(--ease-out),
             box-shadow var(--transition-base) var(--ease-out)}
.primary:hover{transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 hsl(var(--primary-foreground) / .28),
    inset 0 -1px 0 hsl(var(--primary) / .4),
    0 12px 32px hsl(var(--glow-primary) / .42),
    0 4px 8px hsl(var(--shadow-color) / .1)}
.primary:active{transform:translateY(0);
  box-shadow:
    inset 0 1px 0 hsl(var(--primary-foreground) / .28),
    0 4px 12px hsl(var(--glow-primary) / .24)}

/* btn-primary: landing page CTA link (mirrors .primary) */
.btn-primary{display:inline-block;padding:15px 36px;border-radius:var(--radius-lg);
  color:hsl(var(--primary-foreground));font-weight:700;font-family:var(--font-sans);
  font-size:var(--text-base);letter-spacing:-.01em;
  text-decoration:none;
  background:linear-gradient(180deg,
    hsl(var(--primary)),
    hsl(var(--primary) / .82));
  box-shadow:
    inset 0 1px 0 hsl(var(--primary-foreground) / .28),
    inset 0 -1px 0 hsl(var(--primary) / .4),
    0 6px 20px hsl(var(--glow-primary) / .32),
    0 2px 4px hsl(var(--shadow-color) / .12);
  transition:transform var(--transition-base) var(--ease-out),
             box-shadow var(--transition-base) var(--ease-out)}
.btn-primary:hover{transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 hsl(var(--primary-foreground) / .28),
    inset 0 -1px 0 hsl(var(--primary) / .4),
    0 16px 40px hsl(var(--glow-primary) / .46),
    0 4px 8px hsl(var(--shadow-color) / .1)}
.btn-primary:active{transform:translateY(-1px)}

:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:3px;border-radius:var(--radius-sm)}

/* ---- status / feedback ---- */
.price{font-size:var(--text-sm);color:hsl(var(--muted-foreground));font-weight:500}
.status{color:hsl(var(--muted-foreground));margin:0}
.errors{background:hsl(0 75% 97%);border:1px solid hsl(0 70% 82%);color:hsl(0 60% 38%);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);font-size:var(--text-sm);
  box-shadow:0 2px 8px hsl(0 60% 50% / .08)}
.errors ul{margin:.4em 0 0;padding-inline-start:1.2em}
.hint{color:hsl(var(--muted-foreground));font-size:var(--text-sm);margin:.6em 0 0}

/* ---- landing page sections ---- */
.landing{padding-bottom:var(--space-9)}
/* section headings: larger presence on the wide column */
.landing h2{font-size:clamp(var(--text-xl),2.6vw,var(--text-2xl))}

/* hero — atmospheric, not flat */
.hero{padding-block:var(--space-9) var(--space-7);position:relative;overflow:hidden;
  margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
.hero::before{content:"";position:absolute;inset:-80px -300px 0 -300px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 20% -5%,hsl(var(--accent) / .13),transparent 65%),
    radial-gradient(50% 45% at 85% 15%,hsl(var(--primary) / .1),transparent 60%),
    radial-gradient(30% 30% at 60% 90%,hsl(var(--accent) / .06),transparent 70%)}
/* hero: mobile stacks text → canvas → CTA; wide screens use areas (text+cta left, canvas right) */
.hero-inner{display:grid;align-items:center;gap:var(--space-6)}
@media(min-width:720px){
  .hero-inner{grid-template-columns:1fr 1fr;column-gap:var(--space-7);row-gap:0;
    grid-template-areas:"text canvas" "cta canvas";align-content:center}
  .hero-inner .hero-text{grid-area:text;text-align:start;align-self:end}
  .hero-inner .hero-canvas{grid-area:canvas}
  .hero-inner .hero-cta{grid-area:cta;justify-content:flex-start;align-self:start;
    margin-block-start:var(--space-5)}
  .hero-inner .hero-text .lead{margin-inline:0}
}
.hero-text{text-align:center}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
@media(min-width:720px){.hero-cta{flex-direction:row;align-items:center}}
.hero h1{margin-bottom:.55em}
.hero .lead{margin-inline:auto;margin-bottom:0}
.hero .btn-primary{margin-bottom:0}
.hero-note{font-size:var(--text-sm);color:hsl(var(--muted-foreground));margin:0;
  letter-spacing:.01em}

/* ---- section alternating bands (full-bleed: stretch to viewport, content stays in column) ---- */
.audience,.compare,.trust{
  background:hsl(var(--band-alt));
  border-block:1px solid hsl(var(--band-alt-border) / .6);
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%)}

/* how-it-works steps */
.how{padding:var(--space-9) 0}
.steps{list-style:none;padding:0;margin:var(--space-5) 0 0;display:grid;gap:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{background:hsl(var(--card));
  border:1px solid hsl(var(--border) / .7);
  border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  position:relative;overflow:hidden;
  box-shadow:0 2px 8px hsl(var(--shadow-color) / .04),
             0 1px 0 hsl(var(--primary-foreground) / .5) inset;
  transition:transform var(--transition-base) var(--ease-out),
             box-shadow var(--transition-base) var(--ease-out)}
.steps li:hover{transform:translateY(-3px);
  box-shadow:0 8px 24px hsl(var(--shadow-color) / .1),
             0 1px 0 hsl(var(--primary-foreground) / .5) inset}
.steps li::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  width:3px;height:100%;
  background:linear-gradient(180deg,hsl(var(--primary)),hsl(var(--accent)));
  border-radius:0 0 3px 3px}
.step-n{display:block;font-weight:800;font-size:var(--text-xl);
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;margin-bottom:var(--space-2)}
.steps h3{margin:.25em 0 .5em;font-size:var(--text-base);font-weight:600}
.steps p{margin:0;font-size:var(--text-sm);color:hsl(var(--muted-foreground));line-height:1.6}

/* features */
.features{padding:var(--space-9) 0}
.features h2{margin-bottom:var(--space-5)}
.feature-grid{list-style:none;padding:0;margin:0;
  display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* 6 cards must land 3x2, not 4+2 */
@media(min-width:980px){.feature-grid{grid-template-columns:repeat(3,1fr)}}
.feature-grid .card{padding:var(--space-5) var(--space-6);
  transition:transform var(--transition-base) var(--ease-out),
             box-shadow var(--transition-base) var(--ease-out)}
.feature-grid .card:hover{transform:translateY(-2px);
  box-shadow:
    0 1px 0 hsl(var(--primary-foreground) / .6) inset,
    0 8px 28px hsl(var(--shadow-color) / .1)}
.feature-grid .card h3{margin:0 0 .5em;font-size:var(--text-base);font-weight:600}
.feature-grid .card p{margin:0;color:hsl(var(--muted-foreground));font-size:var(--text-sm);
  line-height:1.65}

/* pricing section — section wrapper only, card styling moved to .plan */
.pricing{padding:var(--space-9) 0;margin-block:0}
.pricing h2{margin-bottom:var(--space-5)}
.pricing .price strong{font-size:var(--text-2xl);font-weight:800;letter-spacing:-.03em;
  color:hsl(var(--foreground))}
.pricing .price span{color:hsl(var(--muted-foreground));font-size:var(--text-base)}
.includes{list-style:none;padding:0;margin:var(--space-5) auto var(--space-6);
  text-align:start;max-width:400px;display:grid;gap:var(--space-2)}
.includes li{display:flex;align-items:center;gap:var(--space-2)}
.includes li::before{content:"✓";color:hsl(var(--primary));font-weight:800;
  font-size:var(--text-sm);flex-shrink:0;
  background:hsl(var(--primary) / .12);
  border-radius:50%;width:20px;height:20px;display:inline-flex;
  align-items:center;justify-content:center}

/* FAQ */
.faq{padding:var(--space-9) 0}
.faq h2{margin-bottom:var(--space-5)}
.faq-item{border:1px solid hsl(var(--border) / .7);border-radius:var(--radius-lg);
  padding:0;overflow:hidden;margin-bottom:var(--space-2);background:hsl(var(--card));
  transition:border-color var(--transition-base) var(--ease-out)}
.faq-item:hover{border-color:hsl(var(--accent) / .4)}
.faq-item summary{padding:var(--space-4) var(--space-5);font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-4);font-size:var(--text-base);
  transition:color var(--transition-fast) var(--ease-out)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:hsl(var(--accent))}
.faq-item summary::after{content:"+";color:hsl(var(--accent));font-weight:700;
  font-size:var(--text-md);flex-shrink:0;
  transition:transform var(--transition-base) var(--ease-out)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:0;padding:0 var(--space-5) var(--space-4);
  color:hsl(var(--muted-foreground));font-size:var(--text-sm);line-height:1.7}

/* trust section */
.trust{padding-block:var(--space-9);text-align:center}
.trust h2{margin-bottom:.5em}
.trust>p:not(.disclaimer){color:hsl(var(--muted-foreground));
  font-size:clamp(var(--text-base),2vw,var(--text-md));max-width:48ch;margin-inline:auto;line-height:1.7}
.disclaimer{font-size:var(--text-xs);color:hsl(var(--muted-foreground) / .75);font-style:italic;
  max-width:72ch;margin-inline:auto;margin-top:var(--space-5)}

/* CTA final */
.cta-final{padding:var(--space-9) 0;text-align:center;position:relative}
.cta-final::before{content:"";position:absolute;z-index:-1;
  inset-block:-20px;inset-inline:calc(50% - 50vw); /* viewport-bound: no phantom h-overflow */
  pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%,hsl(var(--primary) / .07),transparent 70%)}
.cta-final h2{margin-bottom:.5em}
.cta-final>p{color:hsl(var(--muted-foreground));margin-bottom:var(--space-6)}

/* ---- v3 form components ---- */
.subfield{border:1px solid hsl(var(--border));border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);margin:var(--space-4) 0 0}
.subfield .sub{font-size:var(--text-sm);font-weight:600;padding-inline:var(--space-2)}
.radio{display:inline-flex;align-items:center;gap:var(--space-2);margin:var(--space-2) var(--space-4) var(--space-2) 0;
  font-size:var(--text-sm);cursor:pointer;
  transition:color var(--transition-fast) var(--ease-out)}
.radio:hover{color:hsl(var(--accent))}
.radio input{width:auto}
.check{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-base);cursor:pointer;
  transition:color var(--transition-fast) var(--ease-out)}
.check:hover{color:hsl(var(--accent))}
.check input{width:auto;flex-shrink:0;margin-block-start:.3em}
.check>span{min-width:0;line-height:1.5}
.check em{font-style:normal;color:hsl(var(--accent))}
.more{margin-top:var(--space-4)}
.more summary{cursor:pointer;color:hsl(var(--accent));font-weight:600;font-size:var(--text-sm);
  transition:opacity var(--transition-fast) var(--ease-out)}
.more summary:hover{opacity:.75}
.more .grid2{margin-top:var(--space-3)}
.repeat-block{margin-top:var(--space-5)}
.repeat-block .rl{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.item.one .field{margin:0}

/* media upload */
.media{display:grid;gap:var(--space-2);margin-top:var(--space-2)}
.media .thumbs{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.media .thumb{position:relative;width:84px;height:84px;border-radius:var(--radius);overflow:hidden;
  border:1px solid hsl(var(--border));
  transition:transform var(--transition-fast) var(--ease-out)}
.media .thumb:hover{transform:scale(1.03)}
.media .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.media .thumb .rm{position:absolute;top:2px;inset-inline-end:2px;background:hsl(0 0% 0% / .55);
  color:#fff;border:0;border-radius:var(--radius-sm);width:20px;height:20px;cursor:pointer;
  line-height:1;transition:background var(--transition-fast) var(--ease-out)}
.media .thumb .rm:hover{background:hsl(0 70% 50% / .85)}
.media .drop{border:1px dashed hsl(var(--border));border-radius:var(--radius);
  padding:var(--space-4);text-align:center;color:hsl(var(--muted-foreground));
  font-size:var(--text-sm);background:hsl(var(--secondary));
  transition:border-color var(--transition-base) var(--ease-out),
             background var(--transition-base) var(--ease-out)}
.media .drop.over{border-color:hsl(var(--accent));background:hsl(var(--accent) / .06)}
.media.busy{opacity:.6;pointer-events:none}
.link{background:none;border:0;color:hsl(var(--primary));font:inherit;font-weight:600;
  cursor:pointer;padding:0;text-decoration:underline;
  transition:opacity var(--transition-fast) var(--ease-out)}
.link:hover{opacity:.75}
.media .url{font-size:var(--text-xs)}

/* palette */
.palette{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.swatch{display:flex;gap:0;border:2px solid hsl(var(--border));border-radius:var(--radius);
  overflow:hidden;padding:0;cursor:pointer;width:72px;height:36px;
  transition:transform var(--transition-fast) var(--ease-out),
             border-color var(--transition-fast) var(--ease-out)}
.swatch:hover{transform:scale(1.06)}
.swatch span{flex:1}
.swatch.sel{border-color:hsl(var(--accent));
  box-shadow:0 0 0 3px hsl(var(--accent) / .22)}
.palette-custom{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-2)}
.palette-custom input[type=color]{width:36px;height:28px;padding:0;
  border:1px solid hsl(var(--border));border-radius:var(--radius-sm);background:none;cursor:pointer}
.custom-colors{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;
  margin-top:var(--space-2)}
.color-field{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}
.color-field input[type=color]{width:36px;height:28px;padding:0;
  border:1px solid hsl(var(--border));border-radius:var(--radius-sm);background:none;cursor:pointer}

/* ---- CSS mockup frame ---- */
.mockup-frame{background:hsl(var(--card));
  border:1px solid hsl(var(--border));
  border-radius:var(--radius-xl);
  box-shadow:
    0 1px 0 hsl(var(--primary-foreground) / .55) inset,
    0 0 0 1px hsl(var(--shadow-color) / .04),
    0 4px 16px hsl(var(--shadow-color) / .1),
    0 20px 56px hsl(var(--shadow-color) / .12);
  max-width:560px;margin-block-start:var(--space-6);overflow:hidden}
.mockup-bar{display:flex;align-items:center;gap:var(--space-2);
  padding-inline:var(--space-4);padding-block:10px;
  border-block-end:1px solid hsl(var(--border) / .7);
  background:linear-gradient(180deg,hsl(var(--muted) / .7),hsl(var(--muted) / .4))}
/* traffic-light dots with subtle colour */
.mockup-bar i{display:inline-block;width:10px;height:10px;border-radius:50%;
  flex-shrink:0;font-style:normal}
.mockup-bar i:nth-child(1){background:hsl(4 80% 62%);opacity:.75}
.mockup-bar i:nth-child(2){background:hsl(38 88% 56%);opacity:.75}
.mockup-bar i:nth-child(3){background:hsl(132 55% 52%);opacity:.75}

.mockup-body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}

/* hero block — gradient tint (primary→accent) gives it warmth */
.m-hero{width:100%;height:72px;border-radius:var(--radius);
  background:linear-gradient(135deg,
    hsl(var(--primary) / .22) 0%,
    hsl(var(--accent) / .18) 100%);
  position:relative;overflow:hidden}
/* shimmer suggestion — a diagonal highlight */
.m-hero::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:-40%;
  width:30%;height:100%;
  background:linear-gradient(90deg,transparent,hsl(var(--primary-foreground) / .12),transparent);
  transform:skewX(-20deg)}

.m-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
/* tinted mini-cards instead of flat muted */
.m-card{height:48px;border-radius:var(--radius-sm);
  background:hsl(var(--muted));
  border:1px solid hsl(var(--border) / .5)}
.m-card:nth-child(1){background:hsl(var(--primary) / .1);border-color:hsl(var(--primary) / .18)}
.m-card:nth-child(2){background:hsl(var(--accent) / .08);border-color:hsl(var(--accent) / .16)}

.m-btn{width:96px;height:28px;border-radius:999px;
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)));
  box-shadow:0 3px 10px hsl(var(--glow-primary) / .32)}

/* mockup-mini — compact variant inside .example-card */
.mockup-mini{margin-block-start:0;max-width:100%;
  border-radius:var(--radius-lg)}
.mockup-mini .mockup-body{padding:var(--space-2);gap:var(--space-2)}
.mockup-mini .m-hero{height:40px}
.mockup-mini .m-hero::after{display:none}
.mockup-mini .m-row{grid-template-columns:repeat(2,1fr)}
.mockup-mini .m-card{height:28px}
.mockup-mini .m-btn{display:none}

/* ---- hero canvas: assembly composition (pieces flying into a landing) ---- */
.hero-canvas{position:relative;min-height:420px;display:grid;place-items:center;
  padding-block:var(--space-4)}
.hc-board{display:grid;gap:12px;width:min(380px,82%);padding:24px;
  border-radius:var(--radius-xl);rotate:-2deg;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  box-shadow:
    0 1px 0 hsl(var(--primary-foreground) / .55) inset,
    0 0 0 1px hsl(var(--shadow-color) / .04),
    0 4px 16px hsl(var(--shadow-color) / .1),
    0 24px 64px hsl(var(--shadow-color) / .14)}
.hc-block{border-radius:var(--radius-sm);background:hsl(var(--muted))}
.hc-head{height:24px;width:70%;border-radius:var(--radius);
  background:linear-gradient(90deg,hsl(var(--primary) / .45),hsl(var(--accent) / .35))}
.hc-text{height:10px;width:92%}
.hc-text-short{width:64%}
.hc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block:4px}
.hc-img{height:56px;border-radius:var(--radius)}
.hc-row .hc-img:first-child{background:hsl(var(--primary) / .12);border:1px solid hsl(var(--primary) / .18)}
.hc-row .hc-img:last-child{background:hsl(var(--accent) / .1);border:1px solid hsl(var(--accent) / .16)}
.hc-btn{height:30px;width:44%;border-radius:999px;
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)));
  box-shadow:0 3px 10px hsl(var(--glow-primary) / .32)}

.hc-piece{position:absolute;display:flex;align-items:center;
  border-radius:999px;padding:7px 14px;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  font-weight:700;font-size:var(--text-sm);color:hsl(var(--foreground));
  box-shadow:
    0 1px 0 hsl(var(--primary-foreground) / .4) inset,
    0 10px 30px hsl(var(--shadow-color) / .18)}
/* scatter: logical insets so RTL mirrors automatically */
.hero-canvas>:nth-child(2){inset-block-start:6%;inset-inline-start:1%;rotate:-7deg}   /* EN */
.hero-canvas>:nth-child(3){inset-block-start:14%;inset-inline-end:0;rotate:5deg}      /* עב */
.hero-canvas>:nth-child(4){inset-block-end:8%;inset-inline-start:3%;rotate:4deg}      /* RU */
.hero-canvas>:nth-child(5){inset-block-end:22%;inset-inline-end:-2%;rotate:-4deg}     /* palette */
.hero-canvas>:nth-child(6){inset-block-start:-1%;inset-inline-end:26%;rotate:10deg}   /* spark */
.hc-palette{gap:5px;padding:9px 12px}
.hc-palette i{width:13px;height:13px;border-radius:50%;font-style:normal}
.hc-palette i:nth-child(1){background:hsl(var(--primary))}
.hc-palette i:nth-child(2){background:hsl(var(--accent))}
.hc-palette i:nth-child(3){background:hsl(var(--foreground) / .85)}
.hc-palette i:nth-child(4){background:hsl(var(--background));border:1px solid hsl(var(--border))}
.hc-spark{font-size:var(--text-lg);padding:5px 11px;color:hsl(var(--accent))}

/* assembly: fly-in once (transform), then perpetual gentle float (translate composes on top) */
@keyframes hc-fly-in{
  from{opacity:0;transform:translateY(44px) scale(.7) rotate(9deg)}
  to{opacity:1;transform:none}}
@keyframes hc-float{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}}
html.js-motion .hc-piece{
  animation:hc-fly-in .7s cubic-bezier(.22,1,.36,1) both,
    hc-float 6s ease-in-out infinite;
  animation-delay:calc(var(--hc-i,0)*110ms + 250ms),calc(var(--hc-i,0)*700ms + 1s)}
html.js-motion .hc-board>.hc-block,
html.js-motion .hc-board .hc-img{
  animation:hc-fly-in .55s cubic-bezier(.22,1,.36,1) both}
html.js-motion .hc-board>:nth-child(1){animation-delay:.05s}
html.js-motion .hc-board>:nth-child(2){animation-delay:.13s}
html.js-motion .hc-board>:nth-child(3){animation-delay:.21s}
html.js-motion .hc-board>:nth-child(4) .hc-img:first-child{animation-delay:.29s}
html.js-motion .hc-board>:nth-child(4) .hc-img:last-child{animation-delay:.37s}
html.js-motion .hc-board>:nth-child(5){animation-delay:.45s}

/* ---- audience: niche cards grid ---- */
.audience{padding-block:var(--space-9);text-align:center}
.audience h2{margin-bottom:var(--space-5)}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);
  list-style:none;padding:0;margin:0}
@media(max-width:900px){.chips{grid-template-columns:repeat(2,1fr)}}
.chip{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  background:hsl(var(--card));
  border:1px solid hsl(var(--border));
  border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-4);
  font-size:var(--text-base);font-weight:600;
  box-shadow:
    inset 0 1px 0 hsl(var(--primary-foreground) / .5),
    0 1px 3px hsl(var(--shadow-color) / .06);
  transition:border-color var(--transition-base) var(--ease-out),
             box-shadow var(--transition-base) var(--ease-out),
             transform var(--transition-base) var(--ease-out)}
.chip-ico{display:grid;place-items:center;width:52px;height:52px;font-size:26px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,hsl(var(--primary) / .12),hsl(var(--accent) / .08));
  border:1px solid hsl(var(--primary) / .15);
  transition:transform var(--transition-base) var(--ease-out)}
.chip-label{line-height:1.35}
.chip:hover{
  border-color:hsl(var(--primary) / .5);
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 hsl(var(--primary-foreground) / .5),
    0 12px 28px hsl(var(--glow-primary) / .16)}
.chip:hover .chip-ico{transform:scale(1.12) rotate(-4deg)}
.audience-note{color:hsl(var(--muted-foreground));margin-block-start:var(--space-5);margin-block-end:0}

/* ---- examples ---- */
.examples{padding:var(--space-9) 0}
.examples h2{margin-bottom:.5em}
.examples>.lead{margin-bottom:var(--space-5)}
.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-4);margin-block-start:var(--space-5)}
.example-card{display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-5) var(--space-5);
  /* bottom accent line hidden by default — revealed on hover */
  position:relative;overflow:hidden;
  transition:transform var(--transition-base) var(--ease-out),
             box-shadow var(--transition-base) var(--ease-out),
             border-color var(--transition-base) var(--ease-out)}
.example-card::after{content:"";position:absolute;
  inset-block-end:0;inset-inline-start:0;inset-inline-end:0;
  height:3px;
  background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--transition-slow) var(--ease-out)}
.example-card:hover{transform:translateY(-4px);
  border-color:hsl(var(--primary) / .3);
  box-shadow:
    0 1px 0 hsl(var(--primary-foreground) / .6) inset,
    0 12px 36px hsl(var(--shadow-color) / .12),
    0 4px 8px hsl(var(--glow-primary) / .1)}
.example-card:hover::after{transform:scaleX(1)}
.example-card h3{margin:0}
.example-card p{margin:0;color:hsl(var(--muted-foreground));font-size:var(--text-sm);
  line-height:1.65}

/* ---- compare ---- */
.compare{padding-block:var(--space-9)}
.compare h2{margin-bottom:var(--space-5)}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--radius-lg);
  border:1px solid hsl(var(--band-alt-border) / .6);
  box-shadow:0 2px 8px hsl(var(--shadow-color) / .04)}
.compare-table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--text-sm)}
.compare-table th,.compare-table td{padding:var(--space-3) var(--space-4);
  border-block-end:1px solid hsl(var(--border) / .6)}
.compare-table thead th{color:hsl(var(--muted-foreground));font-weight:600;text-align:start;
  background:hsl(var(--background))}
.compare-table thead th:first-child{width:30%}
/* winner column header — gradient band */
.compare-table thead .c-us{
  background:linear-gradient(180deg,hsl(var(--c-us-bg) / .14),hsl(var(--c-us-bg) / .08));
  color:hsl(var(--primary));font-weight:700;
  /* top accent bar */
  border-block-start:2px solid hsl(var(--c-us-bg));
  border-block-end:1px solid hsl(var(--border) / .6)}
.compare-table th[scope="row"]{text-align:start;font-weight:600;
  color:hsl(var(--foreground))}
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th{border-block-end:none}
/* winner column body cells */
.c-us{background:hsl(var(--c-us-bg) / .07)}
.compare-table tbody .c-us{font-weight:600;color:hsl(var(--primary))}
/* row stripe on hover for readability */
.compare-table tbody tr:hover td,
.compare-table tbody tr:hover th{background:hsl(var(--muted) / .5)}
.compare-table tbody tr:hover .c-us{background:hsl(var(--c-us-bg) / .14)}

/* ---- plans (pricing) ---- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-5);align-items:start}
.plan{position:relative;display:flex;flex-direction:column;gap:var(--space-3);
  transition:transform var(--transition-base) var(--ease-out),
             box-shadow var(--transition-base) var(--ease-out)}
.plan .btn-primary{margin-block-start:auto;text-align:center}

/* Popular plan — elevated presence: scale up slightly, stronger glow */
.plan:has(.plan-badge){
  transform:translateY(-4px) scale(1.015);
  border-color:hsl(var(--primary) / .35)!important;
  box-shadow:
    0 1px 0 hsl(var(--primary-foreground) / .6) inset,
    0 8px 32px hsl(var(--plan-popular-glow) / .2),
    0 2px 8px hsl(var(--shadow-color) / .08)!important}
.plan:has(.plan-badge):hover{
  transform:translateY(-7px) scale(1.02);
  box-shadow:
    0 1px 0 hsl(var(--primary-foreground) / .6) inset,
    0 16px 48px hsl(var(--plan-popular-glow) / .28),
    0 4px 12px hsl(var(--shadow-color) / .1)!important}

.plan-badge{position:absolute;
  inset-block-start:calc(-1 * var(--space-2) - 2px);
  inset-inline-end:var(--space-4);
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)));
  color:hsl(var(--primary-foreground));
  font-size:var(--text-xs);font-weight:700;
  padding-block:5px;padding-inline:14px;
  border-radius:999px;
  letter-spacing:.04em;text-transform:uppercase;
  box-shadow:
    0 4px 14px hsl(var(--glow-primary) / .45),
    inset 0 1px 0 hsl(var(--primary-foreground) / .2)}

/* ---- legal page typography ---- */
.legal{padding-block:var(--space-7) var(--space-9);max-width:760px}
.legal h1{margin-block-end:var(--space-3)}
.legal>.lead{margin-block-end:var(--space-6)}
.legal-section{margin-block-start:var(--space-7);scroll-margin-top:80px}
.legal-section h2{font-size:var(--text-lg);margin-block-end:var(--space-3);
  padding-block-end:var(--space-2);border-block-end:1px solid hsl(var(--border) / .6)}
.legal-section p{margin:0;color:hsl(var(--muted-foreground));line-height:1.75;max-width:65ch}

/* ---- brief layout v4: main column + sticky order rail ---- */
#brief-form{display:grid;gap:var(--space-5);align-items:start}
.form-main{display:grid;gap:var(--space-5);min-width:0}
.form-main>.card{margin:0;scroll-margin-top:110px} /* clears topbar + progress nav on anchor jump */
.order-rail{display:grid;gap:var(--space-4);min-width:0}
.order-rail .card{margin:0}
@media(min-width:1024px){
  #brief-form{grid-template-columns:minmax(0,1fr) 360px;column-gap:var(--space-6)}
  .order-rail{position:sticky;top:84px}
}

/* sticky progress nav (injected by app.js) */
.form-progress{position:sticky;top:57px;z-index:4;margin-block:var(--space-4) var(--space-5);
  background:hsl(var(--background) / .85);backdrop-filter:blur(8px);
  border:1px solid hsl(var(--border) / .6);border-radius:999px}
.form-progress ol{display:flex;gap:var(--space-1);list-style:none;margin:0;
  padding:var(--space-1) var(--space-2);overflow-x:auto;scrollbar-width:none}
.form-progress ol::-webkit-scrollbar{display:none}
.form-progress a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font-size:var(--text-sm);color:hsl(var(--muted-foreground));text-decoration:none;white-space:nowrap}
.form-progress a:hover{color:hsl(var(--foreground))}
.form-progress a.is-current{color:hsl(var(--accent));background:hsl(var(--accent) / .08);font-weight:600}
.form-progress .fp-n{font-weight:700;font-size:var(--text-xs)}
.form-progress .fp-t{display:none}
@media(min-width:1024px){.form-progress .fp-t{display:inline}}

/* ---- motion: scroll reveal (only under html.js-motion — content visible without JS) ---- */
html.js-motion [data-reveal]{opacity:0;translate:0 18px;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),translate .6s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--reveal-i,0)*80ms)}
html.js-motion [data-reveal].is-in{opacity:1;translate:0 0}

/* ---- responsive ---- */
@media (max-width:640px){
  .hero-canvas{display:none}
  .grid2,.item .row{grid-template-columns:1fr}
  /* compare: table becomes a stack of per-criterion cards */
  .compare-scroll{overflow:visible;border:none;border-radius:0;box-shadow:none}
  .compare-table,.compare-table tbody,.compare-table tr,
  .compare-table td,.compare-table th[scope=row]{display:block}
  .compare-table{min-width:0}
  .compare-table thead{display:none}
  .compare-table tr{border:1px solid hsl(var(--band-alt-border) / .6);border-radius:var(--radius-lg);
    background:hsl(var(--card));padding:var(--space-4);margin-block-end:var(--space-4);
    box-shadow:0 2px 8px hsl(var(--shadow-color) / .04)}
  .compare-table tbody tr:last-child{margin-block-end:0}
  .compare-table th[scope=row]{padding:0 0 var(--space-3);border-block-end:1px solid hsl(var(--border) / .6);
    margin-block-end:var(--space-2)}
  .compare-table td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);
    padding:var(--space-2) var(--space-2);border-block-end:none;text-align:end}
  .compare-table td::before{content:attr(data-label);flex-shrink:0;
    font-weight:600;color:hsl(var(--muted-foreground));font-size:var(--text-xs)}
  .compare-table td.c-us{border-radius:var(--radius);background:hsl(var(--c-us-bg) / .1)}
  .compare-table td.c-us::before{color:hsl(var(--primary))}
  /* hover stripes are a desktop affordance */
  .compare-table tbody tr:hover td,.compare-table tbody tr:hover th{background:transparent}
  .compare-table tbody tr:hover .c-us{background:hsl(var(--c-us-bg) / .1)}
  .steps{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .hero{padding-block:var(--space-7) var(--space-6)}
  .how,.features,.faq,.cta-final{padding:var(--space-7) 0}
  .trust,.audience,.compare{padding-block:var(--space-7)}
  .examples,.pricing{padding:var(--space-7) 0}
  .example-grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
}
/* ---- order block ---- */
.order-total{font-size:var(--text-lg);margin-block:var(--space-4)}
#order-total{font-weight:700;color:hsl(var(--primary))}
.order-total small{display:block;color:hsl(var(--muted-foreground));font-size:var(--text-xs)}
#order-block .check{margin-block-start:var(--space-2)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  /* reveal safety: never leave content hidden if js-motion got set */
  html.js-motion [data-reveal]{opacity:1!important;translate:none!important}
  body::before,body::after,.hero::before,.cta-final::before{display:none}
  /* freeze example-card accent line so it's always hidden (no transform animation) */
  .example-card::after{transform:scaleX(0)!important}
  /* Popular plan: keep the visual elevation but remove the scale/translate */
  .plan:has(.plan-badge){transform:none!important}
  .plan:has(.plan-badge):hover{transform:none!important}
}