/* fx.css: the Feerasta redesign layer (October 2026). Shared components for every page.
   Rules this file keeps (see ~/.claude/skills/techy-elegant-motion and glass-design):
   - Content is solid. Glass only on things that float (menus, popovers, a sheet).
   - Everything is visible without JS and without animation support. Motion only enhances.
   - One moving light per page (the hero window edge), paused off screen.
   - Brand gold #6b4a2c is light and hairline only, never text on paper.
   - Animate transform, opacity, clip-path, stroke-dashoffset and registered properties only.
   Dark is the site default; light lives under :root[data-theme="light"] (theme.js).
   How to use each class: ~/Downloads/Claude Files/Feerasta Website/Redesign 2026-10/component-guide.md */

/* ---------- 1. Tokens ---------- */
:root{
  --fx-ground:#171513; --fx-ground-2:#1f1c19; --fx-surface:#282420; --fx-surface-2:#282420;
  --fx-ink:#ece7de; --fx-muted:#aaa398; --fx-accent:#d0a77a;
  --fx-action:#e4d5bf; --fx-action-hover:#ece7de; --fx-action-ink:#1c1916;
  --fx-line:rgba(236,231,222,.13); --fx-line-strong:rgba(236,231,222,.24);
  --fx-gold:#d0a77a;
  --fx-dot:rgba(236,231,222,.10);
  --fx-shadow:0 1px 1px rgba(0,0,0,.25),0 22px 48px -26px rgba(0,0,0,.75);
  --fx-shadow-soft:0 1px 1px rgba(0,0,0,.2),0 12px 28px -20px rgba(0,0,0,.6);
  --fx-radius:18px; --fx-radius-sm:12px;
  --fx-ease:cubic-bezier(.23,1,.32,1);
  --fx-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --fx-maxw:1200px;
  /* Glass material (glass-design skill 3), r g b triplets */
  --g-tint:23 21 19; --g-shadow:0 0 0; --g-shadow-a:.55;
  --g-hi:255 255 255 / .16; --g-lo:255 255 255 / .05; --g-glow:255 255 255 / .05;
  --g-rim-a:255 255 255 / .30; --g-rim-b:255 255 255 / .04;
  --g-fill-pop:.84;
}
:root[data-theme="light"]{
  --fx-ground:#eeece7; --fx-ground-2:#f8f7f4; --fx-surface:#f8f7f4; --fx-surface-2:#f8f7f4;
  --fx-ink:#1e1b17; --fx-muted:#57524b; --fx-accent:#6b4a2c;
  --fx-action:#2a2520; --fx-action-hover:#1e1b17; --fx-action-ink:#f1ece3; --fx-gold:#6b4a2c;
  --fx-line:rgba(30,27,23,.18); --fx-line-strong:rgba(30,27,23,.32);
  --fx-dot:rgba(30,27,23,.13);
  --fx-shadow:0 1px 2px rgba(30,27,23,.07),0 24px 50px -28px rgba(30,27,23,.38);
  --fx-shadow-soft:0 1px 2px rgba(30,27,23,.05),0 14px 30px -22px rgba(30,27,23,.28);
  --g-tint:248 247 244; --g-shadow:30 27 23; --g-shadow-a:.26;
  --g-hi:255 255 255 / .92; --g-lo:255 255 255 / .35; --g-glow:255 255 255 / .30;
  --g-rim-a:255 255 255 / .9; --g-rim-b:255 255 255 / .14;
  --g-fill-pop:.80;
}

/* ---------- 2. Base polish (only inside an fx page) ---------- */
.fx{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fx :is(h1,h2,h3){text-wrap:balance}
.fx :is(p,li,dd){text-wrap:pretty}
.fx-num,.fx .tabular{font-variant-numeric:tabular-nums}
.fx-shell{width:min(var(--fx-maxw),calc(100% - 48px));margin-inline:auto}
@media (max-width:600px){.fx-shell{width:calc(100% - 32px)}}

/* ---------- 3. Section and heading ---------- */
.fx-section{padding-block:clamp(64px,9vw,112px)}
.fx-section--tight{padding-block:clamp(44px,6vw,72px)}
.fx-section--band{background:var(--fx-ground-2)}
.fx-head{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(28px,4vw,44px)}
.fx-head--split{max-width:none;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;gap:18px 56px}
.fx-head--split>:not(.fx-head-side){grid-column:1}
.fx-head--split .fx-head-side{grid-column:2;grid-row:1 / span 3;align-self:end;display:grid;gap:12px;justify-items:start}
@media (max-width:860px){.fx-head--split{grid-template-columns:1fr}.fx-head--split .fx-head-side{grid-column:1;grid-row:auto}}
.fx-head h2,.fx-h2{margin:0;font-size:clamp(32px,4.4vw,52px);line-height:1.06;letter-spacing:-.025em;font-weight:500;color:var(--fx-ink)}
.fx-lede{margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--fx-muted);max-width:60ch}

/* Mono eyebrow with a short gold hairline. 13px minimum, never gold text. */
.fx-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font:500 13px/1.3 var(--fx-mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--fx-muted)}
.fx-eyebrow::before{content:"";width:22px;height:1px;background:var(--fx-gold);flex:none}

/* ---------- 4. Actions ---------- */
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;
  border-radius:999px;border:1px solid var(--fx-action);background:var(--fx-action);color:var(--fx-action-ink);
  font:600 16px/1 var(--font-body,system-ui);text-decoration:none;cursor:pointer;
  transition:background-color .18s var(--fx-ease),border-color .18s var(--fx-ease),transform .14s var(--fx-ease)}
.fx-btn:hover{background:var(--fx-action-hover);border-color:var(--fx-action-hover);color:var(--fx-action-ink)}
.fx-btn--quiet{background:transparent;color:var(--fx-ink);border-color:var(--fx-line-strong)}
.fx-btn--quiet:hover{background:color-mix(in srgb,var(--fx-ink) 5%,transparent);border-color:var(--fx-accent);color:var(--fx-ink)}
.fx-btn:active,.fx-btn--quiet:active{transform:scale(.97)}
.fx-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:16px;color:var(--fx-ink);
  text-decoration:underline;text-decoration-color:var(--fx-line-strong);text-underline-offset:5px;text-decoration-thickness:1px;
  transition:text-decoration-color .18s var(--fx-ease),color .18s var(--fx-ease)}
.fx-link:hover{text-decoration-color:var(--fx-accent);color:var(--fx-ink)}
.fx-link [aria-hidden]{transition:transform .18s var(--fx-ease)}
.fx-link:hover [aria-hidden]{transform:translate(2px,-1px)}
.fx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.fx :where(a,button,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--fx-accent);outline-offset:3px}

/* ---------- 5. Live product window (browser frame) ---------- */
.fx-window{position:relative;isolation:isolate;border-radius:var(--fx-radius);background:var(--fx-surface);
  border:1px solid var(--fx-line);box-shadow:var(--fx-shadow);color:var(--fx-ink)}
.fx-window>.fx-window-clip{border-radius:inherit;overflow:hidden}
.fx-window-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--fx-line);
  background:color-mix(in srgb,var(--fx-ground) 55%,var(--fx-surface))}
.fx-window-dots{display:inline-flex;gap:6px}
.fx-window-dots i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--fx-line-strong)}
.fx-window-url{font:500 13px/1 var(--fx-mono);color:var(--fx-muted);padding:6px 12px;border:1px solid var(--fx-line);
  border-radius:999px;background:var(--fx-surface)}

/* Edge light: one per page, brand gold at one point of a slow turn. JS adds .is-paused off screen. */
@property --fx-angle{syntax:"<angle>";inherits:false;initial-value:250deg}
.fx-edge::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--fx-angle),transparent 0deg 200deg,var(--fx-gold) 248deg,rgb(var(--g-rim-a)) 268deg,transparent 320deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .fx-edge::after{animation:fx-edge-turn 20s linear infinite}
  .fx-edge.is-paused::after{animation-play-state:paused}
}
@keyframes fx-edge-turn{from{--fx-angle:0deg}to{--fx-angle:360deg}}
@media (prefers-contrast:more){.fx-edge::after{display:none}}

/* ---------- 6. Hero ground: faint dot grid and static grain ---------- */
.fx-ground{position:relative;isolation:isolate}
.fx-ground::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(var(--fx-dot) 1.1px,transparent 1.3px) 0 0/22px 22px;
  -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,transparent 92%);
          mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,transparent 92%)}
.fx-grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 7. Headline: whole lines rise once (under 700ms, LCP safe) ---------- */
.fx-lines .fx-line{display:block}
@media (prefers-reduced-motion:no-preference){
  .fx-lines .fx-line{animation:fx-lineup .6s var(--fx-ease) both}
  .fx-lines .fx-line:nth-child(2){animation-delay:.09s}
  .fx-lines .fx-line:nth-child(3){animation-delay:.18s}
}
@keyframes fx-lineup{from{opacity:0;transform:translateY(14px)}}

/* ---------- 8. Scroll reveal: visible by default, CSS scroll timeline only ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fx-reveal{animation:fx-rise linear both;animation-timeline:view();animation-range:entry 5% entry 40%}
  }
}
/* Transform only: fading text in on scroll left it below contrast while it entered (axe, 27 Oct). */
@keyframes fx-rise{from{transform:translateY(18px)}}

/* ---------- 9. Bento overview: solid tiles, one idea each ---------- */
.fx-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.fx-tile{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:26px 26px 22px;
  border-radius:var(--fx-radius);background:var(--fx-surface);border:1px solid var(--fx-line);box-shadow:var(--fx-shadow-soft);
  transition:border-color .2s var(--fx-ease)}
.fx-tile:hover{border-color:var(--fx-line-strong)}
.fx-tile--wide{grid-column:span 4}
.fx-tile--tall{grid-row:span 2}
.fx-tile--third{grid-column:span 2}
.fx-tile--half{grid-column:span 3}
.fx-tile--full{grid-column:1 / -1}
.fx-tile h3{margin:0;font-size:clamp(22px,2vw,26px);line-height:1.18;letter-spacing:-.015em;font-weight:500;color:var(--fx-ink)}
.fx-tile p{margin:0;font-size:16.5px;line-height:1.55;color:var(--fx-muted)}
.fx-tile .fx-eyebrow{margin-bottom:4px}
.fx-tile-rule{width:56px;height:1px;background:linear-gradient(90deg,var(--fx-gold),transparent);opacity:.8}
.fx-tile-foot{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:4px 20px}
@media (max-width:980px){.fx-tile--wide{grid-column:1 / -1}.fx-tile--tall{grid-row:auto}.fx-tile--third,.fx-tile--half{grid-column:span 3}}
@media (max-width:640px){.fx-bento{grid-template-columns:1fr}.fx-tile--wide,.fx-tile--third,.fx-tile--half{grid-column:1 / -1}.fx-tile{padding:22px 20px 18px}}

/* A short call transcript, for a tile or a window. */
.fx-say-list{display:grid;gap:10px;margin:14px 0 6px;max-width:560px}
.fx-say{width:fit-content;max-width:88%;padding:12px 16px;border-radius:14px;background:var(--fx-ground);
  border:1px solid var(--fx-line);font-size:16px;line-height:1.45;color:var(--fx-ink)}
.fx-say small{display:block;margin-bottom:3px;font:500 13px/1.2 var(--fx-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fx-muted)}
.fx-say--us{justify-self:end;background:color-mix(in srgb,var(--fx-accent) 9%,var(--fx-surface));
  border-color:color-mix(in srgb,var(--fx-accent) 30%,transparent)}

/* ---------- 10. Workflow line that draws once ----------
   Across (wide screens): an SVG line with numbered nodes above a row of steps.
   Down (860px and narrower): the SVG hides and the steps become a numbered rail whose line
   fills once. Drawn and filled in the HTML; fx.js holds them back until seen, then plays once. */
.fx-flow{position:relative}
.fx-flow-art{display:block;width:100%;height:auto;overflow:visible}
.fx-flow-track{fill:none;stroke:var(--fx-line-strong);stroke-width:2}
.fx-flow-draw{fill:none;stroke:var(--fx-accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.fx-flow-node{fill:var(--fx-surface);stroke:var(--fx-accent);stroke-width:2}
.fx-flow-n{font:600 15px var(--font-body,system-ui);fill:var(--fx-ink);text-anchor:middle;dominant-baseline:central}
html.fx-js .fx-flow:not(.is-in) .fx-flow-draw{stroke-dashoffset:1}
html.fx-js .fx-flow:not(.is-in) .fx-flow-node{stroke:var(--fx-line-strong)}
@media (prefers-reduced-motion:no-preference){
  html.fx-js .fx-flow .fx-flow-draw{transition:stroke-dashoffset 1.4s var(--fx-ease)}
  html.fx-js .fx-flow .fx-flow-node{transition:stroke .3s var(--fx-ease)}
  html.fx-js .fx-flow.is-in .fx-flow-node:nth-of-type(2){transition-delay:.28s}
  html.fx-js .fx-flow.is-in .fx-flow-node:nth-of-type(3){transition-delay:.56s}
  html.fx-js .fx-flow.is-in .fx-flow-node:nth-of-type(4){transition-delay:.84s}
  html.fx-js .fx-flow.is-in .fx-flow-node:nth-of-type(5){transition-delay:1.12s}
}
.fx-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--fx-steps,4),minmax(0,1fr));gap:28px}
.fx-steps>li{position:relative;min-width:0}
.fx-steps h3{margin:0 0 6px;font-size:19px;line-height:1.25;font-weight:600;color:var(--fx-ink);letter-spacing:-.005em}
.fx-steps p{margin:0;font-size:16px;line-height:1.55;color:var(--fx-muted)}
.fx-step-n{display:none}
@media (max-width:860px){
  .fx-flow .fx-flow-art{display:none}
  .fx-steps{grid-template-columns:1fr;gap:0;margin:0}
  .fx-steps>li{padding:0 0 28px 58px}
  .fx-steps>li:last-child{padding-bottom:0}
  .fx-step-n{display:grid;place-items:center;position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
    border:2px solid var(--fx-accent);background:var(--fx-surface);color:var(--fx-ink);font:600 15px/1 var(--font-body,system-ui);z-index:1}
  .fx-steps>li:not(:last-child)::before,.fx-steps>li:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px}
  .fx-steps>li:not(:last-child)::before{background:var(--fx-line-strong)}
  .fx-steps>li:not(:last-child)::after{background:var(--fx-accent);transform-origin:top}
  .fx-steps h3{padding-top:8px}
  html.fx-js .fx-flow:not(.is-in) .fx-steps>li::after{transform:scaleY(0)}
  @media (prefers-reduced-motion:no-preference){
    html.fx-js .fx-flow .fx-steps>li::after{transition:transform .5s var(--fx-ease)}
    html.fx-js .fx-flow.is-in .fx-steps>li:nth-child(2)::after{transition-delay:.25s}
    html.fx-js .fx-flow.is-in .fx-steps>li:nth-child(3)::after{transition-delay:.5s}
    html.fx-js .fx-flow.is-in .fx-steps>li:nth-child(4)::after{transition-delay:.75s}
  }
}

/* ---------- 11. Glass popover menus (language, theme, currency) ---------- */
.fx-pop{--blur:24px;margin:0;padding:8px;border:0;border-radius:18px;min-width:220px;max-height:min(70vh,520px);overflow:auto;
  color:var(--fx-ink);background:rgb(var(--g-tint) / var(--g-fill-pop));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(170%);backdrop-filter:blur(var(--blur)) saturate(170%);
  box-shadow:inset 0 1px 0 rgb(var(--g-hi)),inset 0 -1px 0 rgb(var(--g-lo)),inset 0 0 14px rgb(var(--g-glow)),
    0 1px 2px rgb(var(--g-shadow) / calc(var(--g-shadow-a) * .5)),0 22px 48px -20px rgb(var(--g-shadow) / var(--g-shadow-a)),
    0 0 0 1px var(--fx-line);
  opacity:0;transform:translateY(-4px) scale(.97);transform-origin:top right;
  transition:opacity .18s var(--fx-ease),transform .18s var(--fx-ease),display .18s allow-discrete,overlay .18s allow-discrete}
.fx-pop:popover-open{opacity:1;transform:none}
@starting-style{.fx-pop:popover-open{opacity:0;transform:translateY(-4px) scale(.97)}}
.fx-pop{position:fixed;inset:auto;top:86px;right:24px}
@supports (position-anchor:--fx){.fx-pop[data-anchored]{top:anchor(bottom);right:anchor(right);margin-top:10px}}
.fx-pop-title{margin:4px 10px 6px;font:500 12.5px/1.2 var(--fx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fx-muted)}
.fx-pop-item{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:0 12px;
  border:0;border-radius:11px;background:transparent;color:var(--fx-ink);font:500 16px/1.2 var(--font-body,system-ui);
  text-align:left;text-decoration:none;cursor:pointer}
.fx-pop-item:hover,.fx-pop-item:focus-visible{background:color-mix(in srgb,var(--fx-ink) 8%,transparent);color:var(--fx-ink)}
.fx-pop-item:focus-visible{outline:2px solid var(--fx-accent);outline-offset:-2px}
.fx-pop-item[aria-current="true"],.fx-pop-item[aria-checked="true"]{font-weight:600}
.fx-pop-item[aria-current="true"]::after,.fx-pop-item[aria-checked="true"]::after{content:"";width:7px;height:12px;flex:none;
  border-right:2px solid var(--fx-accent);border-bottom:2px solid var(--fx-accent);transform:rotate(45deg) translate(-2px,-2px)}
.fx-pop-trigger{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:999px;
  background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.fx-pop-trigger:hover{background:color-mix(in srgb,var(--fx-ink) 6%,transparent)}
.fx-pop-trigger svg{width:18px;height:18px}
.feer-language-trigger{font-size:15px;letter-spacing:.01em}
.feer-language-trigger span{font-size:13px;opacity:.8}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fx-pop{background:rgb(var(--g-tint) / .97)}}
@media (prefers-reduced-transparency:reduce){.fx-pop{background:rgb(var(--g-tint));-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.fx-pop{background:rgb(var(--g-tint));-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;outline:1px solid var(--fx-ink)}}
@media (prefers-reduced-motion:reduce){.fx-pop{transform:none;transition:opacity .12s linear,display .12s allow-discrete,overlay .12s allow-discrete}@starting-style{.fx-pop:popover-open{transform:none}}}
@media (max-width:600px){.fx-pop{right:12px;left:auto;top:80px;min-width:min(260px,calc(100vw - 24px))}}

/* ---------- 12. FAQ accordion with smooth height (snaps where unsupported) ---------- */
.fx-faq details{border-top:1px solid var(--fx-line)}
.fx-faq details:last-of-type{border-bottom:1px solid var(--fx-line)}
.fx-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:14px 4px;
  cursor:pointer;font-size:clamp(17px,1.4vw,19px);font-weight:500;color:var(--fx-ink)}
.fx-faq summary::-webkit-details-marker{display:none}
.fx-faq summary::after{content:"";width:11px;height:11px;flex:none;margin-right:4px;border-right:2px solid var(--fx-accent);border-bottom:2px solid var(--fx-accent);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--fx-ease)}
.fx-faq details[open]>summary::after{transform:rotate(225deg) translateY(-3px)}
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .fx-faq{interpolate-size:allow-keywords}
  @media (prefers-reduced-motion:no-preference){
    .fx-faq details::details-content{block-size:0;overflow:hidden;transition:block-size .28s var(--fx-ease),content-visibility .28s allow-discrete}
    .fx-faq details[open]::details-content{block-size:auto}
  }
}

/* ---------- 13. Count-up (only on numbers FEERASTA.md supports) ---------- */
.fx-count{font-variant-numeric:tabular-nums}

/* ---------- 14. Cross-page fade (kept in feerasta.css so every page opts in) ---------- */

/* Visually hidden, still read aloud. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}