/* The front page, from design round 10. The four documents use `styles.css` and never load this.

   No inline style anywhere, because the CSP forbids it and `site.test.ts` fails on it (D-316). The
   hero instrument and the bar's mark are inline SVG whose fills are the classes below, which is how
   they follow the theme without a `style` attribute.

   **Archivo is named and not hosted.** The display face the round drew with is not in `assets/`: the
   site ships no web font, for the reason `styles.css` gives, so the stack falls back to the system
   face and `font-stretch` has nothing to act on. Recorded as E-052. See D-329. */
:root{
  --bg:#1E2226;--band:#15181B;--card:#262A2F;--line:#353A40;--ink:#F2EFE8;--mute:#ABA79D;
  --teal:#5DCDBF;--stem:#E8E4DB;--bar:#5DCDBF;--g1:#23272B;
  --display:"Archivo",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;

  /* The app's own paywall materials, so the plan cards read as the sheet in the app rather than as
     three boxes that happen to be teal. TipscaleUI.Theme.dark: panelA and panelB are #969EA8 at
     0.22 and 0.10, edge is white at 0.16, spec at 0.40, and PanelBackground draws the gradient,
     the one-point edge and the inset top highlight in that order. See D-334. */
  --bezel:#2A2F34;
  --panel-a:rgba(150,158,168,0.22);
  --panel-b:rgba(150,158,168,0.10);
  --edge:rgba(255,255,255,0.16);
  --spec:rgba(255,255,255,0.40);
  /* Brand.juniperDark and Brand.emberDark. The hex is the fallback the design README names for a
     browser with no oklch(); the oklch line is the token as the app specifies it, and on a P3
     display it is the colour the phone shows. Ember core dark is P3 only, and #F68C58 is its
     chroma-reduced sRGB fallback, not a clamped one. */
  --juniper:#5DCDBF;
  --juniper:oklch(0.78 0.105 184);
  --juniper-fill:rgba(93,205,191,0.12);
  --ember-rgb:246,140,88;
  --juniper-rgb:93,205,191;
  /* PaywallMotion: the two lights' alphas, dark scheme. */
  --glow-ember:0.22;
  --glow-juniper:0.18;
}
@media (prefers-color-scheme: light){
  :root{--bg:#F4F1EA;--band:#E9E4D9;--card:#FBF8F2;--line:#D9D3C6;--ink:#1D2024;--mute:#5C584F;
    --teal:#1C766E;--stem:#22262A;--bar:#22262A;--g1:#FBF8F2;
    /* Theme.light: the panel is white at 0.80 and 0.52 over the linen, the edge white at 0.92 and
       the spec at 0.95, which is what makes a light card read as raised rather than as outlined. */
    --bezel:#C9C3B6;
    --panel-a:rgba(255,255,255,0.80);
    --panel-b:rgba(255,255,255,0.52);
    --edge:rgba(255,255,255,0.92);
    --spec:rgba(255,255,255,0.95);
    --juniper:#018D87;
    --juniper:oklch(0.58 0.10 190);
    --juniper-fill:rgba(1,141,135,0.12);
    --ember-rgb:211,93,49;
    --juniper-rgb:1,141,135;
    --glow-ember:0.14;
    --glow-juniper:0.11}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.landing{background:var(--bg);color:var(--ink);font:17px/1.5 var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--ink)}
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}
h1,h2{font-family:var(--display);font-stretch:112%;font-weight:800;margin:0;text-wrap:balance}
h2{font-size:clamp(32px,4.4vw,48px);line-height:1.05;letter-spacing:-.02em}
.lede{margin:16px 0 0;max-width:36em;color:var(--mute);font-size:19px;text-wrap:pretty}

.i-ground{fill:var(--g1)} .i-stem{fill:var(--stem)} .i-bar{fill:var(--bar)}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--display);font-stretch:112%;font-weight:800;font-size:19px}
.brand-icon{width:30px;height:30px;border-radius:7px;display:block}
.top-nav{display:flex;gap:20px;font-size:15px}
.top-nav a{color:var(--mute);text-decoration:none}
.top-nav a:hover{color:var(--ink)}

.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:24px;padding-bottom:88px}
.instrument{width:min(520px,86vw);height:auto;display:block}
.hero h1{font-size:clamp(44px,7vw,84px);line-height:1;letter-spacing:-.03em;margin-top:40px}
.hero .lede{margin-top:20px;max-width:34em}
.get{margin-top:32px;min-height:54px;display:flex;align-items:center}
.store-badge img{display:block;height:52px;width:auto}
.get-note{margin:0;font-size:15px;color:var(--mute)}

.features{padding-bottom:104px}
.features h2{margin-bottom:36px}
/* The carousel: five captures, the arrows and the dots over them. See D-336.

   **It works with no JavaScript.** The track is a scroll snapping flex row that takes a swipe and a
   trackpad, and `--shot-w` is sized so the next screen always peeks in from the right, which is the
   affordance that says there is more. `carousel.js` adds `car-live`, and only then do the arrows
   and the dots appear: as bare anchors they would scroll the whole document to a slide taller than
   a phone screen, and the page would jump on every press. */
.carousel{position:relative;margin-top:36px;
  --shot-w:300px;
  /* The phone's height, which is its width times the capture's own 2868 / 1320. The arrows are
     centred on it, and nothing has been measured off a rendered page to get it. */
  --shot-h:calc(var(--shot-w) * 2.1727)}
.screens{list-style:none;margin:0;padding:0;display:flex;gap:24px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;
  /* Hidden, because a scrollbar under a row of phones reads as a mistake rather than as a control,
     and there are three affordances left without it. */
  scrollbar-width:none;-ms-overflow-style:none}
.screens::-webkit-scrollbar{display:none}
.shot{flex:none;width:var(--shot-w);scroll-snap-align:start}

/* One phone. The bezel is drawn rather than photographed, so it follows the theme; the capture
   inside it is the app, with nothing baked into the pixels. */
.screen{position:relative;border-radius:34px;padding:4px;overflow:hidden;
  background:var(--bezel);
  background:linear-gradient(150deg,var(--bezel),color-mix(in srgb,var(--bezel) 68%,#000));
  box-shadow:0 16px 34px rgba(0,0,0,0.26)}
.screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10)}
.screen img{display:block;width:100%;height:auto;border-radius:30px}

.shot-title{margin:18px 0 0;font-family:var(--display);font-stretch:112%;font-weight:800;
  font-size:21px;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.shot-line{margin:6px 0 0;color:var(--mute);font-size:15px;text-wrap:pretty}

/* The arrows. Hidden until the script is in, and hidden again at the end each one points at. */
.car-arrow{display:none}
.car-live .car-arrow{
  position:absolute;top:calc(var(--shot-h) / 2);transform:translateY(-50%);
  display:grid;place-items:center;width:44px;height:44px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
  transition:opacity .15s ease,color .15s ease}
.car-live .car-prev{left:-14px}
.car-live .car-next{right:-14px}
.car-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.car-arrow:hover{color:var(--teal)}
.car-arrow[aria-disabled="true"]{opacity:.32;pointer-events:none}

/* The dots. One per screen, the one in view filled. */
.car-dots{display:none}
.car-live .car-dots{list-style:none;margin:22px 0 0;padding:0;
  display:flex;justify-content:center;gap:10px}
.car-dot{display:block;padding:6px}
.car-dot span{display:block;width:8px;height:8px;border-radius:999px;
  background:var(--ink);opacity:.26;transition:opacity .15s ease,background .15s ease}
.car-dot[aria-current="true"] span{background:var(--teal);opacity:1}
.car-dot:hover span{opacity:.6}

/* Three screens at a time on a laptop, one and a peek on a phone. The peek is the affordance that
   says there is more, and it is why the width is a fraction of the viewport rather than a fixed
   number below 900. */
@media (max-width: 900px){
  .carousel{--shot-w:min(70vw, 300px)}
  .screens{gap:18px}
  .car-live .car-prev{left:-6px}
  .car-live .car-next{right:-6px}
}
@media (max-width: 520px){
  .car-live .car-arrow{width:38px;height:38px}
  .car-arrow svg{width:19px;height:19px}
}
.tier-key{margin:44px 0 0;color:var(--mute);font-size:16px;max-width:52em;text-wrap:pretty}
.feature-list{margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:32px}
.feature-list div{padding:18px 0;border-top:1px solid var(--line)}
.feature-list dt{font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.feature-list dd{margin:4px 0 0;color:var(--mute);font-size:16px;text-wrap:pretty}

/* Free or Pro, on every row. The Pro mark borrows the paywall's highlighted card: juniper at 12%
   behind a juniper border. Free is the same shape in the quiet ink, so the two read as one pair
   rather than as a badge beside a plain word. */
.tier{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid;line-height:1.3;white-space:nowrap}
.tier-pro{color:var(--teal);border-color:var(--juniper);background:var(--juniper-fill)}
.tier-free{color:var(--mute);border-color:var(--line)}
.tier-key .tier{vertical-align:1px}
.fn{text-decoration:none}
.footnote{margin:24px 0 0;color:var(--mute);font-size:15px;max-width:52em;text-wrap:pretty}

.privacy{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.privacy-grid{padding-top:104px;padding-bottom:104px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px;align-items:start}
.eyebrow{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.privacy h2{font-size:clamp(36px,5vw,60px);line-height:1.02;letter-spacing:-.025em}
.nots{list-style:none;margin:0;padding:0}
.nots li{padding:16px 0;border-top:1px solid var(--line);font-size:22px;font-weight:600}
.nots li:last-child{border-bottom:1px solid var(--line)}
.fine{margin:24px 0 0;color:var(--mute);font-size:16px;text-wrap:pretty}

/* The Pro section, on the app paywall's model.

   **The glow is the section's background, not part of its content**, exactly as PaywallGlow is the
   sheet's. Two drifting lights in the app; two still ones here, at the same places and the same
   alphas: ember at 20% across and 8% down, juniper at 84% and 24%, with the falloff stops
   1.00 / 0.55 / 0.18 / 0 and the vertical mask that fades from 40% of the height and has finished
   by 52%. The app's radius is 0.78 and 0.56 of a 393 pt sheet; this box is up to three times that
   wide, so the radius is clamped rather than scaled, which keeps a wash a wash. See D-334. */
.pro{position:relative;isolation:isolate;overflow:hidden;
  padding-top:104px;padding-bottom:104px}
.pro::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle clamp(280px,52vw,620px) at 20% 8%,
      rgba(var(--ember-rgb),var(--glow-ember)) 0%,
      rgba(var(--ember-rgb),calc(var(--glow-ember) * 0.55)) 35%,
      rgba(var(--ember-rgb),calc(var(--glow-ember) * 0.18)) 70%,
      rgba(var(--ember-rgb),0) 100%),
    radial-gradient(circle clamp(200px,38vw,450px) at 84% 24%,
      rgba(var(--juniper-rgb),var(--glow-juniper)) 0%,
      rgba(var(--juniper-rgb),calc(var(--glow-juniper) * 0.55)) 35%,
      rgba(var(--juniper-rgb),calc(var(--glow-juniper) * 0.18)) 70%,
      rgba(var(--juniper-rgb),0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 52%);
  mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 52%);
}
.plans{list-style:none;margin:40px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:stretch}

/* PanelBackground: the gradient, the one-point edge, and the inset top highlight that follows the
   radius and has faded by 45% of the height. The highlight is a masked gradient border rather than
   a bar across the top, for the reason D-066 gives: a straight bar overhangs the corners. */
.plan{position:relative;border-radius:22px;padding:26px 24px 24px;
  background:linear-gradient(to bottom,var(--panel-a),var(--panel-b));
  border:1px solid var(--edge);
  display:flex;flex-direction:column;gap:6px}
.plan::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(to bottom,var(--spec),transparent 45%);
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude}

/* The card the paywall opens with chosen: juniper at 12% behind a 1.5 pt juniper border, and no
   inset highlight, because the fill is doing that work. */
.plan-best{background:var(--juniper-fill);border:1.5px solid var(--juniper)}
.plan-best::before{display:none}

.plan-head{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.plan-name{font-size:17px;font-weight:700;letter-spacing:-.01em}
.plan-tag{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--teal);white-space:nowrap}
.plan-note{margin:0;color:var(--mute);font-size:15px}
.plan-price{margin:12px 0 0;font-family:var(--display);font-stretch:112%;font-weight:800;
  font-size:44px;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:8px}
/* The currency mark sits on the same baseline as the figure and at about six tenths of it, so it
   reads as part of the price without competing with it. It is inside the amount rather than a flex
   item of its own, or the 8 px gap would push it away from its own number. */
.plan-amount{white-space:nowrap}
.plan-cur{font-size:.58em;font-weight:700;letter-spacing:0;padding-right:.06em}
.plan-per{font-family:var(--text);font-stretch:normal;font-weight:400;font-size:15px;
  letter-spacing:0;color:var(--mute)}

.foot{border-top:1px solid var(--line)}
.foot-row{padding-top:28px;padding-bottom:40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-size:15px}
.foot-nav{display:flex;flex-wrap:wrap;gap:24px}
.foot-nav a{color:var(--ink);text-decoration:none}
.foot-nav a:hover{color:var(--teal)}
.foot-name{color:var(--mute)}