/* ct-www.css — the whole public site (homepage, Help Center and guides, studios, pricing, request
   access, about and the legal pages), 2026-10-21. One stylesheet, same origin, cached for a year by its
   ?v= stamp. It replaced the homepage's inline styles and the old ct-site.css / ct-site.js.

   The look is the one the site already had: a dark lit stage for the hero and the closing, cream
   paper in between, Archivo for display, Space Grotesk for text, Space Mono for small labels.

   How it runs (the rules each page here keeps):
   - nothing blocks first paint but this file: the fonts load beside it and swap in;
   - every page works with no script: the nav, the phone menu (a <details>), the footer and every
     drawn screen are in the HTML; ct-www.js only closes the menu after a choice;
   - the drawn screens are pictures: each is one role="img" with a label, holds no focusable
     element, and uses made-up people, places and figures;
   - small text meets WCAG AA on its own ground; teal text on paper uses --teal-ink (7:1);
   - no sideways page at 375; controls are 44px tall on a phone;
   - motion is hover feedback only, and none of it under prefers-reduced-motion.
   The drawn-screen vocabulary (.m-*) mirrors the app's own tokens (theme.css, ct-skin.css). */

:root{
  --ink:#0F1516; --ink-2:#182122; --ink-3:#223031;
  --paper:#F6F3EC; --paper-2:#EEEAE0; --white:#FFFFFF;
  --teal:#2F7D75; --teal-ink:#1F5B55; --teal-btn:#24675F; --mint:#7FC2B8; --mint-2:#B9E3DC;
  --gold:#C8A24A; --amber:#D9902B; --sky:#3A6EA5; --violet:#6B5CC9; --coral:#C9584A;
  --txt:#182122; --mut:#555B5A; --line:rgba(24,33,34,.10);
  --on-dark:#EEF3F1; --on-dark-2:#A7B6B3; --on-dark-3:#8A9B98; --line-dark:rgba(238,243,241,.12);
  --display:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --r:14px; --r-lg:22px; --pill:999px;
  --wrap:1180px; --gut:32px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--txt);font:16px/1.55 var(--ui);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.nav :focus-visible,.foot :focus-visible{outline-color:var(--mint)}

/* skip link: the first thing a keyboard reaches */
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--white);color:var(--txt);font-weight:600;padding:12px 18px;border-radius:12px;text-decoration:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.skip:focus{top:12px}

/* ---- type ---- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;border-radius:var(--pill);border:1px solid rgba(127,194,184,.38);color:var(--mint);background:rgba(47,125,117,.16)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.paper .eyebrow,.paper-2 .eyebrow{color:var(--teal-ink);border-color:rgba(31,91,85,.28);background:rgba(47,125,117,.08)}
.h-sec{font-size:clamp(32px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.h-band{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.028em;line-height:1.08}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--mut);line-height:1.55}
.dark .lede{color:var(--on-dark-2)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 24px;border-radius:var(--pill);font:600 15.5px/1.2 var(--ui);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background-color .15s,border-color .15s}
.btn .ic{width:16px;height:16px}
.btn-pri{background:linear-gradient(92deg,var(--teal-btn),var(--teal));color:#fff;box-shadow:0 10px 30px -12px rgba(47,125,117,.75)}
.btn-ghost{color:var(--on-dark);border-color:rgba(238,243,241,.34);background:rgba(238,243,241,.04)}
.btn-line{color:var(--txt);border-color:rgba(24,33,34,.28);background:transparent}
.btn-sm{min-height:44px;padding:10px 18px;font-size:14px}
@media (any-hover:hover){
  .btn-pri:hover{transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(47,125,117,.9)}
  .btn-ghost:hover{border-color:var(--on-dark);background:rgba(238,243,241,.09)}
  .btn-line:hover{border-color:var(--txt)}
}
.dark .more{color:var(--mint)}
.tlink{color:var(--teal-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.dark .tlink{color:var(--mint)}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--teal-ink);font-weight:600;text-decoration:none}
.more .ic{width:16px;height:16px;transition:transform .15s}
@media (any-hover:hover){ .more:hover{text-decoration:underline;text-underline-offset:3px} .more:hover .ic{transform:translateX(3px)} }

/* ---- nav: the floating pill, static HTML; the phone menu is a <details> ---- */
.nav{position:sticky;top:12px;z-index:50;padding:0 16px;margin-bottom:-72px}
.nav-in{max-width:var(--wrap);margin:0 auto;height:60px;display:flex;align-items:center;gap:22px;padding:0 8px 0 20px;border-radius:var(--pill);background:rgba(15,21,22,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(238,243,241,.12);box-shadow:0 10px 40px -20px rgba(0,0,0,.8);color:var(--on-dark)}
.brand{display:flex;align-items:center;min-height:44px;flex:none}
.brand img{height:24px;width:auto}
.nav-links{display:flex;gap:4px;margin:0 auto;list-style:none;padding:0}
.nav-links a,.nav-r .login{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;font-size:14.5px;color:var(--on-dark-2);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--on-dark)}
@media (any-hover:hover){ .nav-links a:hover,.nav-r .login:hover{color:var(--on-dark)} }
.nav-r{display:flex;align-items:center;gap:6px;flex:none}
.nav-menu{display:none;position:relative}
.nav-menu > summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;cursor:pointer;color:var(--on-dark)}
.nav-menu > summary::-webkit-details-marker{display:none}
.nav-menu > summary .ic{width:22px;height:22px}
.nav-menu[open] > summary{background:rgba(238,243,241,.1)}
.nav-menu .sheet{position:absolute;right:-8px;top:54px;width:min(300px,calc(100vw - 32px));background:rgba(15,21,22,.98);border:1px solid rgba(238,243,241,.14);border-radius:18px;padding:8px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8)}
.nav-menu .sheet a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;color:var(--on-dark);text-decoration:none;font-size:16px}
.nav-menu .sheet a.cta{margin-top:6px;justify-content:center;background:linear-gradient(92deg,var(--teal-btn),var(--teal));color:#fff;font-weight:600}
@media (any-hover:hover){ .nav-menu .sheet a:hover{background:rgba(238,243,241,.08)} }

/* ---- sections ---- */
.dark{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.paper{background:var(--paper)}
.paper-2{background:var(--paper-2)}
.sec{padding:104px 0}
.sec-head{max-width:820px;margin:0 auto 52px;text-align:center}
.sec-head .eyebrow{margin-bottom:20px}
.sec-head .lede{margin:18px auto 0;max-width:640px}
.cv{content-visibility:auto;contain-intrinsic-size:auto 1100px}

/* the lit stage */
.glow{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.glow.g1{width:900px;height:900px;background:radial-gradient(circle,rgba(47,125,117,.62),transparent 60%);top:-340px;left:-200px;opacity:.6}
.glow.g2{width:900px;height:900px;background:radial-gradient(circle,rgba(200,162,74,.32),transparent 60%);top:160px;right:-380px;opacity:.6}
.dots{position:absolute;inset:0;background-image:radial-gradient(rgba(238,243,241,.08) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 80%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 80%);pointer-events:none}

/* ---- homepage hero ---- */
.hero{padding:150px 0 0}
.hero-in{position:relative;text-align:center;max-width:940px;margin:0 auto;padding:0 var(--gut)}
.hero h1{font-size:clamp(42px,7vw,84px);font-weight:800;letter-spacing:-.035em;line-height:.98;margin-top:24px}
.grad{background:linear-gradient(92deg,#5FBFAE 0%,var(--mint) 55%,var(--mint-2) 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{max-width:660px;margin:24px auto 0}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero-note{margin-top:18px;font-size:14px;color:var(--on-dark-3)}
.hero-shot{position:relative;max-width:var(--wrap);margin:72px auto 0;padding:0 var(--gut)}
.hero-shot .m-win{border-radius:18px 18px 0 0;border-bottom:0;box-shadow:0 50px 120px -40px rgba(47,125,117,.55),0 30px 60px -30px rgba(0,0,0,.8)}
.hero-shot .m-phone{position:absolute;right:var(--gut);bottom:0;box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(238,243,241,.14)}
.hero-shot .m-scr{height:566px;border-radius:34px 34px 0 0}
.hero-shot .m-phone{border-radius:42px 42px 0 0;padding-bottom:0}
.duo-hero .m-win{max-width:calc(100% - 240px)}
.duo-hero .m-win .m-main{padding-right:110px}

/* ---- the fact strip under the hero ---- */
.facts{padding:72px 0 8px}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.facts li{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 18px}
.facts .k{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.facts .k .ic{width:22px;height:22px;color:var(--teal)}
.facts p{margin-top:8px;font-size:14.5px;color:var(--mut);line-height:1.5}

/* ---- prep to wrap ---- */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:f}
.flow > li{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px 20px;display:flex;flex-direction:column}
.flow .num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--teal-ink)}
.flow h3{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:8px 0 6px}
.flow p{font-size:14.5px;color:var(--mut)}
.flow .mini{margin-top:auto;padding-top:16px}

/* ---- a feature band: copy beside a drawing ---- */
.feat{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px;align-items:center}
.feat.flip{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.feat.flip > .feat-copy{order:2}
.feat.wide{grid-template-columns:minmax(0,1fr);gap:48px}
.feat.top{align-items:start}
.feat.wide > .feat-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 64px;align-items:start}
.feat.wide > .feat-copy > *{grid-column:1}
.feat.wide > .feat-copy > .eyebrow{justify-self:start}
.feat.wide > .feat-copy > .ticks{grid-column:2;grid-row:1 / span 6;margin-top:6px}
.feat-copy .eyebrow{margin-bottom:18px}
.feat-copy .lede{margin-top:16px}
.feat-copy .more{margin-top:18px}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5;color:var(--txt)}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:#E3EFED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.6' fill='none' stroke='%231F5B55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.dark .ticks li{color:var(--on-dark)}
.dark .ticks li::before{background-color:rgba(127,194,184,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.6' fill='none' stroke='%237FC2B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ticks b{font-weight:700}
.band + .band{border-top:1px solid var(--line)}

/* figures: the drawing and a caption under it */
.fig{margin:0}
.fig figcaption{margin-top:14px;font-size:14px;color:var(--mut);line-height:1.5;text-align:center;max-width:620px;margin-left:auto;margin-right:auto}
.dark .fig figcaption{color:var(--on-dark-3)}
.phones{display:flex;gap:22px;justify-content:center;align-items:flex-start}
.phones .m-phone:nth-child(2){margin-top:36px}
.feat:not(.wide) .phones{gap:16px}
.feat:not(.wide) .phones .m-phone{--pw:270px}
/* a window with a phone standing in front of its right edge; the window keeps its right side clear */
.duo{position:relative}
.duo > .m-win{max-width:calc(100% - 250px)}
.duo > .m-win .m-main{padding-right:76px}
.duo > .m-phone{position:absolute;right:0;bottom:-28px}
.duo figcaption{text-align:left;margin-left:0;max-width:calc(100% - 360px)}
.fig:not(.duo) .m-body{min-height:0}   /* a window drawn on its own is as tall as what it shows */

/* three small cards (Agreements, Travel, Scripts) */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column}
.card h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.card p{font-size:15px;color:var(--mut)}
.card .ticks{margin-top:14px;gap:9px}
.card .ticks li{font-size:14.5px}
.card .mini{margin:18px 0 4px}
.card .more{margin-top:auto;padding-top:12px}

/* ---- the suite grid ---- */
.suite{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.suite a{display:flex;flex-direction:column;gap:6px;height:100%;min-height:44px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.suite .t{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.suite .t .ic{width:22px;height:22px;color:var(--teal)}
.suite .d{font-size:14px;color:var(--mut);line-height:1.45}
@media (any-hover:hover){ .suite a:hover{border-color:rgba(31,91,85,.45);transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(24,33,34,.35)} }

/* ---- closing and footer ---- */
.close{padding:120px 0 104px;text-align:center}
.close .glow{width:1100px;height:600px;left:50%;top:40%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(47,125,117,.5),transparent 60%);filter:blur(40px)}
.close h2{position:relative;font-size:clamp(38px,6vw,74px);font-weight:800;letter-spacing:-.035em;line-height:1}
.close .lede{position:relative;max-width:560px;margin:20px auto 0}
.close .cta-row{position:relative}
.foot{background:#0B1011;color:var(--on-dark-3);padding:30px 0;font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;align-items:center}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 9px;color:#9AA8A5;text-decoration:none}
@media (any-hover:hover){ .foot a:hover{color:var(--on-dark)} }

/* ============ the guide pages (/help/*) ============ */
.g-hero{padding:142px 0 0}
.g-hero .crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--on-dark-3);margin-bottom:22px}
.g-hero .crumbs a{color:var(--on-dark-2);display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.g-hero h1{font-size:clamp(40px,6vw,72px);font-weight:800;letter-spacing:-.035em;line-height:1}
.g-hero .lede{max-width:680px;margin-top:20px}
.g-hero .cta-row{justify-content:flex-start;margin-top:28px}
.g-hero .hero-shot{margin-top:56px}
.toc-in{display:flex;gap:6px;padding:14px var(--gut);overflow-x:auto;scrollbar-width:thin}
.toc a{flex:none}
@media (min-width:981px){ .toc-in{flex-wrap:wrap} }
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--pill);background:var(--white);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--txt);text-decoration:none}
@media (any-hover:hover){ .toc a:hover{border-color:rgba(31,91,85,.45);color:var(--teal-ink)} }
.toc-wrap{background:var(--paper);border-bottom:1px solid var(--line)}
.prose{max-width:720px}
.prose h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0 0 14px}
.prose h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:26px 0 8px;font-family:var(--ui)}
.prose p{font-size:16.5px;color:var(--mut);line-height:1.65;margin:0 0 14px}
.prose p b,.prose li b{color:var(--txt)}
.steps{list-style:none;counter-reset:s;margin:20px 0 0;padding:0;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;padding:18px 20px 18px 66px;background:var(--white);border:1px solid var(--line);border-radius:18px;font-size:16px;color:var(--mut);line-height:1.55}
.steps li::before{content:counter(s);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;background:#E3EFED;color:var(--teal-ink);font:700 14px/32px var(--mono);text-align:center}
.steps li b{color:var(--txt)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards.two{grid-template-columns:1fr 1fr}
.m-crop{overflow:hidden}   /* a drawing too wide for a phone is cut at its edge, never squeezed */
.cards .card h3{font-size:18px;font-family:var(--ui);font-weight:700;letter-spacing:-.01em;display:flex;gap:10px;align-items:center}
.cards .card h3 .ic{width:22px;height:22px;color:var(--teal)}
.cards .card p{font-size:14.5px}
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:16px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 20px;font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:18px;height:18px;color:var(--teal-ink);transition:transform .15s}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details > div{padding:0 20px 18px;color:var(--mut);font-size:15.5px;line-height:1.6}
.faq details > div p + p{margin-top:10px}
.related{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.note{border:1px solid rgba(31,91,85,.25);background:#E8F1EE;border-radius:16px;padding:16px 18px;font-size:15px;color:var(--txt);line-height:1.55}
.note b{color:var(--teal-ink)}

/* =====================================================================================
   THE DRAWN SCREENS (.m-*). Pictures of the app, built from its own tokens: canvas #F5F5F7,
   white cards, the ink rail, teal accent, tinted pills. Never a screenshot; made-up data only.
   ===================================================================================== */
.m{--a-canvas:#F5F5F7;--a-ink:#182122;--a-ink-2:#5F6B69;--a-ink-3:#6B6B70;--a-line:#E5E5EA;--a-hair:#EEEEF1;
  --a-teal:#2F7D75;--a-tint:#E6F4F1;--a-grad:linear-gradient(92deg,#2F7D75,#3F9E92 70%,#5FAFA3);
  font-family:var(--ui);color:var(--a-ink);text-align:left;line-height:1.35;font-size:13px;-webkit-user-select:none;user-select:none}
.m *{box-sizing:border-box}
.m .ic{width:15px;height:15px;vertical-align:-3px}

/* the browser window with the app's ink rail */
.m-win{background:var(--a-canvas);border:1px solid rgba(24,33,34,.12);border-radius:16px;overflow:hidden;box-shadow:0 40px 100px -46px rgba(8,12,11,.6),0 8px 24px -14px rgba(8,12,11,.35)}
.m-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 15px;background:#0F1413}
.m-bar > i{width:10px;height:10px;border-radius:50%;background:rgba(238,243,241,.18)}
.m-bar .u{margin:0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:#8C9795;padding-right:40px}
.m-body{display:flex;min-height:430px}
.m-rail{width:182px;flex:none;background:#161B1A;padding:14px 10px;display:flex;flex-direction:column;gap:1px}
.m-logo{display:flex;align-items:center;gap:8px;color:#ECEDE9;font-weight:700;font-size:15px;letter-spacing:-.012em;padding:2px 8px 12px}
.m-logo img{width:18px;height:18px}
.m-grp{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:#7C8886;padding:11px 9px 4px}
.m-nav{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;color:#AFB8B5;font-size:12.5px;font-weight:500}
.m-nav .ic{width:16px;height:16px;color:#84908D}
.m-nav.on{background:linear-gradient(92deg,#2F7D75,#3F9E92);color:#fff;font-weight:700;box-shadow:0 6px 16px -8px rgba(47,125,117,.8)}
.m-nav.on .ic{color:#fff}
.m-spring{flex:1 1 auto;min-height:10px}
.m-user{display:flex;align-items:center;gap:9px;padding:11px 6px 0;border-top:1px solid rgba(238,243,241,.08);color:#ECEDE9;font-size:11.5px}
.m-user .m-av{width:24px;height:24px;font-size:9px}
.m-main{flex:1;min-width:0;padding:20px 24px 24px}

/* atoms */
.m-crumb{font-size:11.5px;color:var(--a-ink-3);margin-bottom:8px}
.m-crumb b{color:var(--a-ink);font-weight:600}
.m-crumb i{font-style:normal;margin:0 6px;color:#C3C3C7}
.m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.m-title{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.028em;display:flex;align-items:center;gap:10px}
.m-tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.m-btn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid rgba(24,33,34,.16);background:#fff;color:var(--a-ink);white-space:nowrap}
.m-btn.pri{background:var(--a-grad);color:#fff;border:0;box-shadow:0 8px 18px -10px rgba(47,125,117,.8)}
.m-btn.dk{background:#24302F;color:#fff;border-color:transparent}
.m-tabs{display:flex;gap:18px;border-bottom:1px solid var(--a-line);margin-bottom:14px;overflow:hidden}
.m-tabs span{font-size:12.5px;font-weight:600;color:var(--a-ink-3);padding:0 0 9px;position:relative;white-space:nowrap}
.m-tabs span.on{color:var(--a-ink)}
.m-tabs span.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--a-teal);border-radius:2px}
.m-tabs em{font-style:normal;font-size:10px;background:#ECECEF;border-radius:999px;padding:1px 6px;margin-left:5px;color:var(--a-ink-2)}
.m-pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.4}
.m-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.m-pill.nd::before{display:none}
.p-teal{color:#1F5951;background:#E3EFED}.p-gold{color:#7E6222;background:#F6EFD9}.p-amber{color:#7A5416;background:#F6ECD8}
.p-sky{color:#2A4F79;background:#E3ECF7}.p-violet{color:#4A3E95;background:#ECE8FA}.p-grey{color:#5E6463;background:#ECEAE3}.p-red{color:#8F3A2F;background:#F6E4E1}
.m-card{background:#fff;border:1px solid var(--a-line);border-radius:14px;padding:4px 16px 10px}
.m-card.pad{padding:14px 16px}
.m-ch{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--a-ink-3);padding:12px 0 4px}
.m-ch .sp{margin-left:auto}
.m-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--a-hair);font-size:12.5px}
.m-row:first-child,.m-ch + .m-row{border-top:0}
.m-row .nm{font-weight:600;flex:1 1 140px;min-width:0}
.m-row .sub{display:block;font-size:11px;color:var(--a-ink-3);font-weight:400;margin-top:1px}
.m-row .sp{margin-left:auto;flex:0 1 auto;min-width:0;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.m-row .amt{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.m-row .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--a-ink-3);width:44px;flex:none}
.m-av{width:27px;height:27px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.av-teal{background:#2F7D75}.av-gold{background:#A97F2C}.av-violet{background:#6B5CC9}.av-sky{background:#3A6EA5}.av-coral{background:#B0483C}.av-amber{background:#B8711C}
.m-mono{font-family:var(--mono)}
.m-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--a-ink-3)}
.m-muted{color:var(--a-ink-3)}
.m-teal{color:#1F5951}
.m-strike{text-decoration:line-through;color:var(--a-ink-3)}
.m-band{display:flex;gap:12px;align-items:flex-start;background:#F7EEDC;border:1px solid #EBD9B3;border-radius:14px;padding:12px 14px;color:#6B4A12;margin-bottom:14px}
.m-band .ic{width:18px;height:18px;margin-top:1px}
.m-band b{color:#4E360C}
.m-band{flex-wrap:wrap}
.m-band > div,.m-band > span{flex:1 1 200px;min-width:0}
.m-band > .ic{flex:none}
.m-phone .m-band{flex-wrap:nowrap}
.m-band.col{flex-direction:column;flex-wrap:nowrap}
.m-band.col > *{flex:none}
.m-band .sp{margin-left:auto;display:flex;gap:7px;flex:0 0 auto}
.m-band ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.m-band li{display:flex;gap:8px;align-items:baseline;font-size:12px;color:#4E360C}
.m-band li::before{content:"";width:6px;height:6px;border-radius:50%;background:#C8A24A;flex:none;transform:translateY(-1px)}
.m-band.teal{background:#E8F3F0;border-color:#C9E3DD;color:#1F5951}
.m-band.teal b{color:#16443F}
.m-band.ink{background:#1C2524;border-color:#2B3739;color:#D9E3E1}
.m-band.ink b{color:#fff}
.m-times{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--a-line);border-radius:12px;overflow:hidden;background:#fff;margin-bottom:12px}
.m-times > div{padding:10px 12px;border-left:1px solid var(--a-hair);text-align:center}
.m-times > div:first-child{border-left:0;background:var(--a-tint)}
.m-times .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--a-ink-3)}
.m-times > div:first-child .l,.m-times > div:first-child .v{color:#1F5951}
.m-times .v{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.m-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.m-stat{background:#fff;border:1px solid var(--a-line);border-radius:12px;padding:11px 13px}
.m-stat .l{font-size:11px;color:var(--a-ink-3)}
.m-stat .v{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}
.m-stat .v small{font-size:11px;color:var(--a-ink-3);font-weight:500;letter-spacing:0}
.m-stat .s{font-size:10.5px;color:var(--a-ink-3);margin-top:3px}
.m-stat.on{background:var(--a-tint);border-color:#CFE6E1}
.m-stat.on .v,.m-stat.on .l{color:#1F5951}
.m-stat.bad{background:#FBECEA;border-color:#F0D3CE}
.m-stat.bad .v,.m-stat.bad .l{color:#8F3A2F}
.m-meter{height:5px;border-radius:5px;background:#EAEAED;overflow:hidden;margin-top:8px}
.m-meter i{display:block;height:100%;border-radius:5px;background:var(--a-teal)}
.m-sw{width:44px;height:34px;border-radius:8px;flex:none}
.sw1{background:linear-gradient(160deg,#C9B78F,#8E7B55)}.sw2{background:linear-gradient(160deg,#9DB7A4,#5E7B68)}.sw3{background:linear-gradient(160deg,#C8A98A,#7D5E44)}
.sw4{background:linear-gradient(160deg,#A9B8C4,#62778A)}.sw5{background:linear-gradient(160deg,#D2C6A7,#9C8E69)}.sw6{background:linear-gradient(160deg,#B6A7C9,#6F6287)}
.m-tile{width:30px;height:30px;border-radius:8px;color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.03em;display:inline-flex;align-items:center;justify-content:center;flex:none}
.m-check{width:20px;height:20px;border-radius:6px;border:1.5px solid #D5D5DA;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#fff}
.m-check.on{background:#2F7D75;border-color:#2F7D75;color:#fff}
.m-check.on .ic{width:13px;height:13px}
.m-dlg{background:#fff;border:1px solid var(--a-line);border-radius:16px;box-shadow:0 30px 80px -30px rgba(8,12,11,.55);padding:16px 18px}
.m-dlg .t{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em}
.m-dlg .s{font-size:11.5px;color:var(--a-ink-3);margin-top:2px}
.m-foot{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--a-hair)}
.m-doc{background:#fff;border:1px solid var(--a-line);border-radius:12px;padding:12px 14px}
.m-doc .no{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--a-ink-3);text-transform:uppercase}
.m-doc .h{font-weight:700;font-size:13px;margin-top:3px}
.m-doc .big{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.m-line{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:5px 0;border-top:1px solid var(--a-hair)}
.m-line:first-child{border-top:0}
.m-line .amt{font-family:var(--mono);font-size:11px;white-space:nowrap}

/* the phone: a frame, a status line, the app's top bar, the screen, the dock */
.m-phone{--pw:292px;width:var(--pw);flex:none;background:#0C1112;border-radius:42px;padding:9px;box-shadow:0 30px 70px -30px rgba(8,12,11,.55),0 0 0 1px rgba(24,33,34,.18)}
.m-scr{position:relative;height:600px;border-radius:34px;overflow:hidden;background:var(--a-canvas);display:flex;flex-direction:column}
.m-scr.short{height:540px}
.m-status{display:flex;justify-content:space-between;align-items:center;padding:12px 24px 4px;font-size:11.5px;font-weight:700;color:var(--a-ink);flex:none}
.m-status .sig{display:flex;gap:2px;align-items:flex-end;height:10px}
.m-status .sig i{width:3px;background:currentColor;border-radius:1px}
.m-status .sig i:nth-child(1){height:4px}.m-status .sig i:nth-child(2){height:6px}.m-status .sig i:nth-child(3){height:8px}.m-status .sig i:nth-child(4){height:10px}
.m-status .sig.none i{opacity:.28}
.m-status .ns{font-weight:500;font-size:10.5px;display:flex;align-items:center;gap:6px}
.m-top{display:flex;align-items:center;gap:8px;padding:6px 12px 9px;border-bottom:1px solid var(--a-line);flex:none;min-height:46px}
.m-top .b{width:28px;display:flex;justify-content:center;flex:none}
.m-top .b .ic{width:18px;height:18px}
.m-top .t{flex:1;text-align:center;min-width:0}
.m-top .t b{display:block;font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-top .t span{display:block;font-size:10px;color:var(--a-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-top .pillbtn{font-size:11px;font-weight:700;color:#1F5951;background:var(--a-tint);border-radius:999px;padding:6px 11px;flex:none}
.m-body-p{flex:1;overflow:hidden;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.m-body-p > *{flex-shrink:0}
.m-dock{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--a-line);background:#fff;padding:6px 4px 16px;flex:none}
.m-dock span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:8.5px;font-weight:600;color:var(--a-ink-3)}
.m-dock .ic{width:18px;height:18px}
.m-dock span.on{color:#1F5951}
.m-dock span.on .ic{background:var(--a-tint);border-radius:999px;padding:2px 10px;width:40px;box-sizing:content-box;height:16px}
.m-actions{display:flex;gap:8px;padding:10px 12px 18px;border-top:1px solid var(--a-line);background:#fff;flex:none}
.m-actions .m-btn{flex:1;justify-content:center;padding:10px 10px;font-size:12px}
.m-sec{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--a-ink-3);margin:4px 2px -2px}
.m-list{background:#fff;border:1px solid var(--a-line);border-radius:14px;overflow:hidden}
.m-list .m-row{padding:9px 12px}

/* Today's card on Home (mod/home/today.js) */
.m-today{background:#182122;color:#EEF3F1;border-radius:18px;padding:14px 15px 13px;box-shadow:0 12px 26px -16px rgba(8,12,11,.6)}
.m-today .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:#9FB2B0}
.m-today .call{font-family:var(--display);font-weight:800;font-size:46px;letter-spacing:-.04em;line-height:1;margin-top:8px}
.m-today .call small{font-size:16px;color:#7FC2B8;letter-spacing:0;margin-left:4px}
.m-today .ln{font-size:11.5px;color:#C5D1CF;margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.m-today .conf{display:flex;align-items:center;gap:7px;font-size:11.5px;margin-top:6px}
.m-today .conf::before{content:"";width:8px;height:8px;border-radius:50%;background:#5FBF74;box-shadow:0 0 0 3px rgba(95,191,116,.25)}
.m-today .pl{border-top:1px solid rgba(238,243,241,.14);margin-top:11px;padding-top:10px;display:flex;align-items:center;gap:10px}
.m-today .pl b{display:block;font-size:12.5px}
.m-today .pl span{display:block;font-size:10.5px;color:#AFC0BD}
.m-today .dir{margin-left:auto;font-size:10.5px;font-weight:700;background:#2A3634;border-radius:999px;padding:7px 10px;white-space:nowrap;display:flex;gap:5px;align-items:center}
.m-today .bt{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.m-today .bt span{text-align:center;font-size:12px;font-weight:700;border-radius:999px;padding:9px 6px;border:1px solid rgba(238,243,241,.22)}
.m-today .bt span:first-child{background:var(--a-grad);border:0}

/* the crew's copy (view.html) */
.m-cc{background:#182122;color:#fff;padding:16px 16px 14px}
.m-cc .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#AFC0BD;display:flex;align-items:center;gap:6px}
.m-cc .k::before{content:"";width:6px;height:6px;background:#5FBFAE;transform:rotate(45deg)}
.m-cc .who{font-size:11.5px;color:#C5D1CF;margin-top:12px}
.m-cc .call{font-family:var(--display);font-weight:800;font-size:58px;letter-spacing:-.045em;line-height:.95}
.m-cc .call small{font-size:20px;color:#5FBFAE;margin-left:6px;letter-spacing:0}
.m-cc .role{font-size:12px;color:#E6ECEB;margin-top:4px}
.m-cc .meta{font-size:10.5px;color:#AFC0BD;margin-top:6px}
.m-cc .v{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:#9FB2B0;margin-top:6px}
.m-confirm{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#2F7D75;color:#fff;padding:11px 16px;font-weight:700;font-size:13px}
.m-confirm span{background:#fff;color:#1F5951;border-radius:999px;padding:6px 12px;font-size:12px}
.m-confirm.done{background:#E3EFED;color:#1F5951}
.m-adv{background:#FBF3E4;padding:10px 16px;font-size:11.5px;color:#4E360C;border-bottom:1px solid #EFDDB9}
.m-adv b{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:#8A6312;margin-bottom:3px}
.m-cctabs{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--a-line);background:#fff;padding:9px 2px 16px;flex:none}
.m-cctabs span{text-align:center;font-size:9.5px;color:var(--a-ink-3);font-weight:500;position:relative}
.m-cctabs span.on{color:var(--a-ink);font-weight:700}
.m-cctabs span.on::before{content:"";position:absolute;left:6px;right:6px;top:-10px;height:2px;background:#2F7D75}
.m-shots .g{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#5F6B69;padding:10px 14px 8px}
.m-shots .g .sp{margin-left:auto}
.m-shots .s{display:flex;gap:10px;padding:9px 14px;border-top:1px solid #EDEBE4;align-items:flex-start;background:#F7F7F9}
.m-shots .s .tx{font-size:12px;line-height:1.3}
.m-shots .s .tx b{color:#1F5951}
.m-shots .s .tx small{display:block;font-size:10px;color:var(--a-ink-3);margin-top:2px}
.m-shots .s .by{display:block;font-size:10px;color:#1e7a34;font-weight:700;margin-top:2px}
.m-shots .crit{background:#FDF1EF;color:#8F3A2F}

/* small cards inside the homepage steps and the trio (.mini) */
.mini{background:#FBFAF6;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mini .m-line{font-size:12px;color:#33403F}
.mini .m-line span:first-child{color:#55605E}

/* the stripboard (Schedule) and the screenplay page (Scripts) */
.m-dot{width:8px;height:8px;border-radius:50%;flex:none}
.m-daybreak{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#7A5416;background:#FBF6EA;text-align:center;padding:7px;margin:4px -16px;border-top:1px solid rgba(197,162,74,.3);border-bottom:1px solid rgba(197,162,74,.3)}
.m-scriptwrap{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px;align-items:start}
.m-script{position:relative;background:#FFFFFE;border:1px solid var(--a-line);border-radius:12px;padding:24px 30px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.75;color:#232219;box-shadow:0 12px 32px -20px rgba(22,23,26,.3)}
.m-script .slug{font-weight:700}
.m-script .act{margin-top:10px}
.m-script .chr{margin-top:12px;padding-left:32%;font-weight:700}
.m-script .dlg{padding-left:16%;padding-right:10%}
.m-script .par-inline{font-weight:400;color:#6B6B70}
.m-script .caret{display:inline-block;width:2px;height:12px;background:#2F7D75;vertical-align:-2px;margin-left:2px}
.m-script .pgno{margin-top:14px;padding-top:9px;border-top:1px solid var(--a-hair);font-size:9px;letter-spacing:.08em;color:#6B6B70;text-transform:uppercase;text-align:center}
.m-scenes{background:#fff;border:1px solid var(--a-line);border-radius:12px;padding:10px 8px}
.m-scenes .sc{font-size:11.5px;font-weight:500;color:#5F6B69;padding:7px 10px;border-radius:8px}
.m-scenes .sc.on{background:#E3EFED;color:#1F5951;font-weight:700}

/* a hero that opens on its eyebrow (Help Center, Studios, Pricing, Request access, About) */
.g-hero .wrap > .eyebrow{display:inline-flex}

/* ============ REQUEST ACCESS (/demo) ============ */
.req-card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 30px 70px -40px rgba(13,15,20,.28)}
.req-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--txt);margin-bottom:7px}
.field .req{color:var(--teal-ink)}
.field input,.field select,.field textarea{width:100%;min-height:48px;font:16px/1.4 var(--ui);color:var(--txt);background:var(--paper);border:1px solid rgba(24,33,34,.22);border-radius:12px;padding:12px 13px}
.field select{-webkit-appearance:none;appearance:none;padding-right:38px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23555B5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.field textarea{min-height:110px;resize:vertical;line-height:1.5}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.field .bad{border-color:#B0483C}
.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.req-go{width:100%;margin-top:4px}
.req-go[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}   /* until ct-www.js has its handler in place */
.req-err{min-height:1px;margin:12px 0 0;font-size:14px;color:#8F3A2F;text-align:center}
.req-fine{margin-top:14px;font-size:14px;color:var(--mut);text-align:center}
.req-nojs{font-size:16px;color:var(--txt);line-height:1.6}
.req-ok{display:none;text-align:center;padding:26px 8px}
.req-ok h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.req-ok p{color:var(--mut)}
.is-sent .req-form{display:none}
.is-sent .req-ok{display:block}

/* ============ THE LEGAL PAGES (restyled; their words are pinned by tools/tests/site-pages.test.js) ============ */
.legal-hero{padding:142px 0 64px}
.legal-hero .eyebrow{margin-bottom:20px}
.legal-hero h1{font-size:clamp(38px,5.6vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.legal-hero .lede{max-width:720px;margin-top:16px}
.legal-wrap{padding:64px 0 96px}
.legal{max-width:820px;--muted:var(--mut);--faint:#5E6463;--card:#fff;--line-light:var(--line);--ink-soft:#3A3B36;--ink:var(--txt)}
.legal h2{font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-.02em;margin:44px 0 12px}
.legal h2:first-child{margin-top:0}
.legal h3{font-family:var(--ui);font-size:18px;font-weight:700;margin:26px 0 8px}
.legal p,.legal li{font-size:16.5px;color:var(--mut);line-height:1.65}
.legal p{margin:0 0 14px}
.legal ul{padding-left:22px;margin:10px 0 16px}
.legal li{margin:6px 0}
.legal b,.legal strong{color:var(--txt)}
.legal a{color:var(--teal-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.legal .lede{font-size:18.5px;color:#3A3B36}
.legal .updated{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#5E6463;text-transform:uppercase;margin-bottom:8px}
.legal .note{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:24px 0;font-size:15px}
.legal .caps{font-size:14.5px;letter-spacing:.01em;color:#3A3B36}
.legal .sample{font-family:var(--mono);font-size:13px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;color:#3A3B36;white-space:pre-wrap;line-height:1.55;overflow-wrap:anywhere}
.legal .kv{display:flex;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:var(--mut)}
.legal .kv:first-child{border-top:0}
.legal .kv .k{flex:none;width:140px;color:#5E6463;font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding-top:3px;font-family:var(--mono)}
.legal .mkcap{font-size:14px;text-align:center;margin:8px auto 24px;max-width:560px}
.legal .wmock{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(22,23,26,.28);margin:26px auto 8px;max-width:390px;color:var(--txt)}
.legal .wbar{display:flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-bottom:1px solid var(--line);background:#FBFAF6}
.legal .wbar i{width:9px;height:9px;border-radius:50%;background:#E3E0D6}
.legal .wbar .u{margin:0 auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#5E6463}
.legal .wbody{padding:18px 20px 20px}
.legal .whead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.legal .whead h4,.legal .whead .wh4{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0}
.legal .wpill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;background:#E6F4F1;color:#1F5951}
.legal .wrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.legal .wrow:first-of-type{border-top:0}
.legal .wrow .nm{font-weight:600}
.legal .wrow .sub{display:block;font-size:13px;color:#5E6463;font-weight:400}
.legal .consent-note{display:flex;gap:11px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px;font-size:13.5px;line-height:1.55;color:#3A3B36}
.legal .consent-note .cbox{width:20px;height:20px;border-radius:6px;border:2px solid #5E6463;flex:none;margin-top:1px}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .duo-hero .m-win{max-width:calc(100% - 200px)}
}
@media (max-width:980px){
  .facts ul{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
  .feat,.feat.flip{grid-template-columns:minmax(0,1fr);gap:40px}
  .feat.flip > .feat-copy{order:0}
  .feat-copy{max-width:680px}
  .trio,.cards{grid-template-columns:1fr 1fr}
  .suite,.related{grid-template-columns:repeat(2,1fr)}
  .m-rail{display:none}
  .feat.wide > .feat-copy{grid-template-columns:1fr}
  .feat.wide > .feat-copy > .ticks{grid-column:1;grid-row:auto;margin-top:22px}
  .duo > .m-win{max-width:none}
  .duo > .m-win .m-main{padding-right:24px}
  .duo > .m-phone{position:relative;right:auto;bottom:auto;margin:-48px auto 0}
  .duo figcaption{text-align:center;margin:14px auto 0;max-width:620px}
}
@media (max-width:860px){
  .nav-links,.nav-r .login,.nav-r .btn{display:none}
  .nav-menu{display:block}
  .nav-in{padding:0 8px 0 18px;justify-content:space-between}
}
@media (max-width:980px){
  /* a row of phones becomes a strip that scrolls inside itself (a labelled, focusable region) */
  .phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gut) 18px;margin:0 calc(var(--gut) * -1);gap:16px;scrollbar-width:thin}
  .phones .m-phone{scroll-snap-align:center}
  .phones .m-phone:nth-child(2){margin-top:0}
  .duo-hero .m-win{max-width:calc(100% - 170px)}
  .duo-hero .m-win .m-main{padding-right:90px}
}
@media (max-width:760px){
  .duo-hero .m-win{display:none}   /* beside a phone, the phone tells it on a phone */
  .hero-shot .m-phone{position:relative;right:auto;margin:0 auto}
  .hero-shot{margin-top:52px}
  .m-grid2{grid-template-columns:1fr}
  .m-phone .m-grid2{grid-template-columns:1fr 1fr}
  .m-float{position:relative!important;right:auto!important;bottom:auto!important;width:auto!important;margin-top:12px}
}
@media (max-width:640px){
  :root{--gut:16px}
  .sec{padding:68px 0}
  .hero{padding-top:118px}
  .g-hero{padding-top:112px}
  .facts ul,.flow,.trio,.cards,.cards.two,.suite,.related{grid-template-columns:1fr}
  .sec-head{margin-bottom:36px;text-align:left}
  .sec-head .lede{margin-left:0}
  .cta-row .btn{flex:1 1 auto}
  .eyebrow{font-size:11px;letter-spacing:.12em}
  .m-main{padding:14px}
  .m-tools .m-btn:not(.pri){display:none}
  .m-times .v{font-size:15px}
  .m-times > div{padding:8px 4px}
  .m-grid3{grid-template-columns:1fr 1fr}
  .m-hide-sm{display:none!important}
  .steps li{padding-left:60px}
  .foot .wrap{flex-direction:column;align-items:flex-start}
  .foot ul{margin-left:-9px}
}
@media (max-width:820px){ .m-scriptwrap{grid-template-columns:minmax(0,1fr)} .m-scenes{display:none} }
@media (max-width:640px){
  .req-two{grid-template-columns:1fr;gap:0}
  .req-card{padding:20px}
  .legal-hero{padding:112px 0 44px}
  .legal-wrap{padding:44px 0 64px}
  .legal .kv{flex-direction:column;gap:4px}
  .legal .kv .k{width:auto}
  .m-script{padding:18px 16px 12px}
}
@media (max-width:360px){ .m-phone,.feat:not(.wide) .phones .m-phone{--pw:262px} }
.m-phone .m-times .v{font-size:14px}
.m-phone .m-times > div{padding:7px 3px}
.m-phone .m-times .l{font-size:7.5px;letter-spacing:.08em}

/* motion: hover feedback only, and none of it when the person asks for less */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn-pri:hover,.suite a:hover{transform:none!important}
}
/* print: the words, without the stage */
@media print{
  .nav,.skip,.glow,.dots,.hero-shot,.fig,.close .cta-row{display:none!important}
  .dark{background:#fff;color:#000}
}