/* ahreum.ai site styles. Brand tokens: Ink #1A1714, Hanji #EBE2CE, Vermilion #C2371F.
   Light and dark share one token set; dark is applied by the OS preference or the toggle (data-theme). */
:root{
  --hanji:#EBE2CE;
  --hanji-seen:#E9E0CC;       /* the paper as it looks, grain included: what a flat surface beside it has to match */
  --hanji-card:#F3EBD9;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --grain-blend:multiply;
  --ink:#1A1714;
  --ink-soft:rgba(26,23,20,.72);
  --ink-faint:rgba(26,23,20,.32);
  --ink-hair:rgba(26,23,20,.14);
  --vermilion:#C2371F;
  --vtext:#B5311B;            /* vermilion that passes AA for small text on hanji */
  --paper:#fff;
  --chrome:rgba(243,235,217,.85);
  --band-bg:#1A1714;
  /* the closing block's fades, blended ahead of time so every browser draws the same curve (iOS 15 has no color-mix):
     the band's black into the video's light tint, then the dark into the footer's paper (site.css, .closeout::before) */
  --closeout-in-1:rgba(25,22,19,.888);--closeout-in-2:rgba(23,20,18,.65);--closeout-in-3:rgba(19,16,14,.412);
  --closeout-out-1:rgba(39,36,32,.696);--closeout-out-2:rgb(69,65,58);--closeout-out-3:rgb(124,118,107);--closeout-out-4:rgb(194,186,169);
  --band-fg:#EBE2CE;
  --band-fg-soft:rgba(235,226,206,.74);
  --band-accent:#EE7B62;
  --on-ink:#EBE2CE;
  --ok:#2A8452;
  --oktext:#155C38;
  --alert:#C2371F;
  --alertbg:rgba(194,55,31,.06);
  --on-accent:#fff;
  --ink-line:rgba(26,23,20,.5);
  --serif:"Fraunces","IBM Plex Sans KR",serif;
  --sans:"Jost","IBM Plex Sans KR",system-ui,sans-serif;
  --space-section:clamp(140px,18vw,260px);
  --space-title-gap:clamp(40px,5.5vw,56px);
  --gutter:clamp(16px,4vw,24px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --hanji:#171411;
  --hanji-seen:#1A1714;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  --grain-blend:screen;
  --hanji-card:#201C18;
  --ink:#EBE2CE;
  --ink-soft:rgba(235,226,206,.74);
  --ink-faint:rgba(235,226,206,.36);
  --ink-hair:rgba(235,226,206,.15);
  --vermilion:#E0563C;
  --vtext:#EE7B62;
  --paper:#2A2420;
  --chrome:rgba(32,28,24,.85);
  --band-bg:#0E0C0A;
  --closeout-in-1:rgba(14,12,10,.888);--closeout-in-2:rgba(14,12,10,.65);--closeout-in-3:rgba(14,12,10,.412);
  --closeout-out-1:rgba(15,13,11,.696);--closeout-out-2:rgb(17,15,12);--closeout-out-3:rgb(20,18,15);--closeout-out-4:rgb(24,21,18);
  --on-ink:#171411;
  --ok:#7CC39F;
  --oktext:#7CC39F;
  --alert:#EE7B62;
  --alertbg:rgba(238,123,98,.08);
  --on-accent:#171411;
  --ink-line:rgba(235,226,206,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --hanji:#171411;
  --hanji-seen:#1A1714;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  --grain-blend:screen;
  --hanji-card:#201C18;
  --ink:#EBE2CE;
  --ink-soft:rgba(235,226,206,.74);
  --ink-faint:rgba(235,226,206,.36);
  --ink-hair:rgba(235,226,206,.15);
  --vermilion:#E0563C;
  --vtext:#EE7B62;
  --paper:#2A2420;
  --chrome:rgba(32,28,24,.85);
  --band-bg:#0E0C0A;
  --closeout-in-1:rgba(14,12,10,.888);--closeout-in-2:rgba(14,12,10,.65);--closeout-in-3:rgba(14,12,10,.412);
  --closeout-out-1:rgba(15,13,11,.696);--closeout-out-2:rgb(17,15,12);--closeout-out-3:rgb(20,18,15);--closeout-out-4:rgb(24,21,18);
  --on-ink:#171411;
  --ok:#7CC39F;
  --oktext:#7CC39F;
  --alert:#EE7B62;
  --alertbg:rgba(238,123,98,.08);
  --on-accent:#171411;
  --ink-line:rgba(235,226,206,.5);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--ink-faint) var(--hanji-seen);scroll-behavior:smooth;scroll-padding-top:80px} /* focus and anchors land below the sticky header */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:var(--hanji-seen)}
::-webkit-scrollbar-thumb{background:var(--ink-faint);background-clip:content-box;border:3px solid var(--hanji-seen);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);background-clip:content-box}
html,body{overflow-x:clip}
@supports not (overflow:clip){html{overflow-x:hidden}}
body{
  background:var(--grain),var(--hanji);background-blend-mode:var(--grain-blend);color:var(--ink);
  font-family:var(--sans);font-size:17.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease;
}
a{color:inherit}
a:focus-visible{outline:3px solid var(--vermilion);outline-offset:3px}
a:not([class]):focus-visible{border-radius:6px}
button:focus-visible{outline:3px solid var(--vermilion);outline-offset:3px}
img,svg{display:block;max-width:100%}
strong,b{font-weight:600}
[lang="ko"]{font-family:"IBM Plex Sans KR",var(--sans);word-break:keep-all;white-space:nowrap}
[lang="vi"]{font-family:"Be Vietnam Pro",var(--sans)}
.nowrap{white-space:nowrap}
/* switched off by a site flag (scripts/set-flag.mjs): hidden whatever display the element's own rules give it */
[data-flag][hidden],[data-flag-off][hidden]{display:none!important}

/* the ink lines live behind everything; cards are opaque so the lines pass under them */
.ink{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ink path{fill:none;stroke-linecap:round}
.ink .s1{stroke:var(--vermilion);opacity:.14;stroke-width:2.5}
.ink .s2{stroke:var(--ink);opacity:.09;stroke-width:1.8}
@media (prefers-reduced-motion:no-preference){
  .ink path{stroke-dasharray:420 1200;animation:inkflow 14s linear infinite}
  .ink path:nth-child(2){animation-delay:-4s;animation-duration:17s}
  .ink path:nth-child(3){animation-delay:-9s;animation-duration:20s}
  .ink path:nth-child(4){animation-delay:-6s;animation-duration:16s}
  @keyframes inkflow{to{stroke-dashoffset:-1620}}
}
.page{position:relative;z-index:1}
/* loose text sits on a soft patch of paper, so the ink lines pass under it instead of through it */
.hero-core,.section-head,.brief-text,.math-total,.math-note,.contact{position:relative;isolation:isolate}
.hero-core::before,.section-head::before,.brief-text::before,.math-total::before,.math-note::before,.contact::before{
  content:"";position:absolute;inset:-28px -12px;z-index:-1;pointer-events:none;
  background:var(--grain),var(--hanji);background-blend-mode:var(--grain-blend);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent),linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent),linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  mask-composite:intersect;
}
.band .section-head::before{display:none}
.contact::before{inset:0 -12px -28px}
@media (max-width:600px){ .band h2 br{display:none} }

.wrap{max-width:1040px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.narrow{max-width:760px}
:where(section.wrap,.band){padding-top:var(--space-section);padding-bottom:var(--space-section)}
.section-head{text-align:center;margin-bottom:var(--space-title-gap)}
.section-head.left{text-align:left}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--vtext);margin-bottom:18px;max-width:none;line-height:1.5}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;text-wrap:balance}
h2{font-size:clamp(27px,4.6vw,37px);line-height:1.3;margin-bottom:16px}
h3{font-size:21px;margin-bottom:8px}
p{text-wrap:pretty}
.section-sub{color:var(--ink-soft);max-width:640px;margin:0 auto}
.section-head.left .section-sub{margin:0}
.section-sub + .section-sub{margin-top:18px}
.math .section-sub{max-width:720px}
hr.divider{border:0;border-top:1px solid var(--ink-hair);max-width:1040px;margin:0 auto}

/* buttons: 48px tall, ink filled; the only accent is vermilion text and the seal */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 24px;border-radius:12px;border:1.5px solid var(--ink);
  font:inherit;font-weight:600;font-size:16.5px;line-height:1.2;text-decoration:none;cursor:pointer;
  color:var(--ink);background:transparent;transition:background .2s,color .2s,transform .2s;
}
.btn.primary{background:var(--ink);color:var(--on-ink)}
.btn.primary:hover{background:var(--vermilion);border-color:var(--vermilion);color:var(--on-accent)}
.btn:not(.primary):hover{background:var(--hanji-card)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ================= header ================= */
.top{position:sticky;top:0;z-index:40;--solid:1}
/* --solid runs from 0 to 1. On the home page it is 0 while the big mark is in view, so the header has no fill
   and no small logo; site.js raises it as the mark scrolls under the header. Every other page stays at 1. */
html.hdr-fade .top{--solid:0}
/* The header's fill. A real element, not ::before, so the script can fade it with an inline opacity of its own. */
.top-bg{position:absolute;inset:0;background:var(--hanji-seen);border-bottom:1px solid var(--ink-hair);opacity:min(1, calc(var(--solid) * 3));pointer-events:none}
.top .bar{position:relative;max-width:1040px;margin:0 auto;padding:8px var(--gutter);display:flex;align-items:center;gap:8px;min-height:64px}
.top .spacer{flex:1 1 auto}
.top .iconbtn,.top .login{flex:0 0 auto}
.top .lead{flex:0 1 auto;min-width:0}
.top .lockup{flex:0 1 auto;min-width:0}
.lockup .mk,.lockup .seal{flex:0 0 auto}
@media (max-width:400px){ .lockup{gap:6px} .lockup .wm{font-size:19px} }
.lockup{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 6px;border-radius:12px;text-decoration:none;color:var(--ink)}
/* The landing view on the home page shows only the theme toggle (top left) and Log in (top right).
   As the big mark scrolls away, the logo takes the toggle's place and the site links fade in.
   Everywhere else, and if the script never runs, the header is in its scrolled state. */
.lead{display:grid;align-items:center;justify-items:start}
.lead > *{grid-area:1 / 1}
.top .fade-in{opacity:clamp(0, calc(var(--solid) * 3 - 2), 1);transform:translateY(calc((1 - var(--solid)) * 10px))}
.top .fade-out{opacity:clamp(0, calc(1 - var(--solid) * 3), 1)}
html.hdr-fade .top:not(.logo-on) .fade-in{visibility:hidden}
html.hdr-fade .top.solid-done .fade-out{visibility:hidden}
html:not(.hdr-fade) .top .fade-out{display:none}
.login{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border:1px solid var(--ink-hair);border-radius:999px;font-size:14.5px;font-weight:500;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.login:hover{background:var(--hanji-card);color:var(--vtext)}
.login svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lockup .mk{width:32px;height:27px;color:var(--ink)}
.lockup .wm{font-size:21px;font-weight:500;letter-spacing:.02em;line-height:1}
.lockup .seal{width:17px;height:17px;transform:rotate(-4deg)}
.topnav{display:flex;align-items:center;gap:2px;margin-right:6px}
.topnav > a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:10px;font-size:15.5px;font-weight:500;text-decoration:none;color:var(--ink-soft)}
.topnav > a:hover{color:var(--vtext);background:var(--hanji-card)}
.topnav > a.btn{margin-left:8px;min-height:44px;padding:0 16px;font-size:15px;color:var(--on-ink);border-radius:999px;white-space:nowrap}
.topnav > a.btn:hover{color:var(--on-accent)}
/* just above the drawer breakpoint the bar is tight: keep every link on one line */
@media (min-width:861px) and (max-width:960px){ .topnav{gap:0;margin-right:2px} .topnav > a{padding:0 8px;white-space:nowrap} .topnav > a.btn{margin-left:4px;padding:0 13px} .top .bar{gap:6px} }
.tools{display:flex;align-items:center;gap:4px;margin-left:4px}
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--ink-hair);border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;transition:color .2s,background .2s;
}
.iconbtn:hover{color:var(--vtext);background:var(--hanji-card)}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}
/* Phones and tablets: the menu button top left, the logo centered (as in the web app), and the links, the theme
   switch and Log in in a drawer from the left. Desktop keeps the links, the toggle and Log in in the bar. */
.menubtn,.drawer-head,.drawer-foot,.scrim{display:none}
.theme-toggle .t-light{display:none}
:root[data-theme="dark"] .theme-toggle .t-light{display:inline}
:root[data-theme="dark"] .theme-toggle .t-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .t-light{display:inline}
  :root:not([data-theme="light"]) .theme-toggle .t-dark{display:none}
}
html.menu-open{overflow:hidden}
/* where a classic scrollbar keeps its gutter, the gutter takes the root color: dim it to match the backdrop */
html.menu-open{background-color:color-mix(in srgb,var(--hanji-seen) 60%,rgb(10,8,6))}
@media (max-width:860px){
  .top .bar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
  .menubtn{display:inline-flex;grid-area:1 / 1;border-color:transparent;color:var(--ink)}
  .menubtn:hover,.drawer-close:hover{background:transparent}
  .menubtn svg{width:22px;height:22px;stroke-width:2}
  .top .lead{grid-area:1 / 2;justify-self:center}
  .lead .theme-toggle,.top .bar > .theme-toggle,.top .bar > .login,.top .spacer{display:none}
  .top .topnav{
    position:fixed;top:0;bottom:0;left:0;z-index:3;width:min(300px,calc(100vw - 56px));
    display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0;
    padding:calc(10px + env(safe-area-inset-top,0px)) 14px calc(22px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px));
    overflow-y:auto;overscroll-behavior:contain;background:var(--hanji-seen);border-right:1px solid var(--ink-hair);box-shadow:0 0 40px rgba(0,0,0,.18);
    opacity:1;transform:translateX(calc(-100% - 60px));visibility:hidden;
  }
  /* Ties with the header fade rule that hides .fade-in items until the logo shows, and wins by coming later. */
  html .top .bar .topnav.open{transform:none;visibility:visible}
  /* The script adds .moving for the slide only, so crossing the breakpoint never animates a drawer,
     and taps during the slide fall through to the backdrop instead of the links sliding under them. */
  .top .topnav.moving{pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s}
  html .top .bar .topnav.open.moving{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .drawer-close{border-color:transparent;color:var(--ink)}
  .drawer-close svg{width:22px;height:22px;stroke-width:2}
  .topnav > a{min-height:48px;font-size:17px;padding:0 12px}
  .topnav > a.btn{margin:8px 0 0;min-height:48px;justify-content:center;border-radius:12px}
  .drawer-foot{display:flex;flex-direction:column;gap:2px;margin-top:14px;padding-top:14px;border-top:1px solid var(--ink-hair)}
  .drawer-item{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:16px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer}
  .drawer-item:hover{background:var(--hanji-card);color:var(--vtext)}
  .drawer-item svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .scrim{display:block;position:fixed;inset:0;z-index:2;padding:0;border:0;-webkit-tap-highlight-color:transparent;background:rgba(10,8,6,.4);opacity:0;visibility:hidden;cursor:pointer;transition:opacity .25s ease,visibility 0s linear .25s}
  .scrim.on{opacity:1;visibility:visible;transition:opacity .25s ease}
  /* No script (turned off, or site.js never ran and the head script dropped hdr-fade on the home page or boot on
     the other pages): the drawer cannot open, so the bar shows the logo and Log in instead of a menu button that does nothing. */
  html:not(.js):not(.hdr-fade):not(.boot) .top .bar{grid-template-columns:minmax(0,1fr) auto}
  html:not(.js):not(.hdr-fade):not(.boot) .menubtn{display:none}
  html:not(.js):not(.hdr-fade):not(.boot) .top .lead{grid-area:1 / 1;justify-self:start}
  html:not(.js):not(.hdr-fade):not(.boot) .top .bar > .login{display:inline-flex;grid-area:1 / 2}
}
@media (prefers-reduced-motion:reduce){ .top .topnav.moving,html .top .bar .topnav.open.moving,.scrim,.scrim.on{transition:none} }

/* Safari's bar colors (see site.js): a full-width strip at each edge, above the menu and its dimmer, that paints nothing.
   Its background color is the paper as seen, which Safari reads for its status bar and toolbar; the background is
   clipped to an empty content box, so nothing shows. 12px tall: Safari reads no color from a box 10px or less. */
.edge-tint{position:fixed;left:0;right:0;z-index:2147483000;height:12px;padding-top:12px;background-color:var(--hanji-seen);background-clip:content-box;pointer-events:none}
.edge-tint.top{top:0}
.edge-tint.bottom{bottom:0}

/* ================= hero ================= */
.hero{position:relative;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:48px;padding-bottom:150px}
.hero-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px}
.mark-wrap{position:relative;display:block;font:inherit;width:clamp(180px,28vw,250px);margin:0 0 46px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mark-wrap:focus-visible{outline:3px solid var(--vermilion);outline-offset:8px}
.mark-wrap .mark{display:block;width:100%;height:auto;overflow:visible}
.mark-say{position:absolute;left:50%;bottom:-40px;font-family:var(--sans);transform:translateX(-50%) translateY(6px);font-size:15px;font-weight:500;letter-spacing:.1em;color:var(--vtext);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.mark-say.on{opacity:1;transform:translateX(-50%) translateY(0)}
.wordmark{font-family:"Jost",sans-serif;font-weight:400;font-size:clamp(52px,9vw,84px);letter-spacing:.02em;line-height:.9;color:var(--ink);text-wrap:nowrap}
.hangul{font-size:clamp(14px,2.2vw,17px);letter-spacing:.44em;text-indent:.44em;color:var(--ink-soft);margin-top:16px}
.rule{width:56px;height:3px;background:var(--vermilion);margin:28px auto;border-radius:2px}
.tagline{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-soft);font-size:clamp(18px,2.6vw,23px)}
.hero .eyebrow{margin:14px 0 0}
.hero .lede{margin:44px auto 0;max-width:760px;font-size:20px}
.hero .cta{align-items:center;margin-top:44px;gap:44px}
.scroll-cue.cue-off{display:none}
.hero.no-cue{padding-bottom:64px}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:600;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--ink-soft)}
.scroll-cue::after{content:"";display:block;width:1.5px;height:38px;margin:10px auto 0;background:linear-gradient(var(--vermilion),transparent)}
@media (prefers-reduced-motion:no-preference){
  .stamp-in{animation:stampIn .55s cubic-bezier(.2,1.2,.4,1) both}
  @keyframes stampIn{0%{opacity:0;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
  .rise{animation:rise .7s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .scroll-cue::after{animation:cue 1.8s ease-in-out infinite}
  @keyframes cue{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.55);opacity:.5}}
  .mark-wrap.pop .mark{animation:markPop .45s cubic-bezier(.2,1.4,.4,1)}
  @keyframes markPop{0%{transform:scale(1)}35%{transform:scale(.96)}100%{transform:scale(1)}}
}
.lede{font-size:clamp(17.5px,1.9vw,20px);color:var(--ink-soft);max-width:560px;margin-bottom:30px}

/* ================= the brief ================= */
.brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.brief .lede{margin-bottom:0}
.brief .lede + .lede{margin-top:18px}
.lede b{color:var(--ink)}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cta-note{font-size:14.5px;color:var(--ink-soft)}
.phone-wrap{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.phone-wrap figcaption{font-size:13.5px;color:var(--ink-soft);text-align:center;max-width:360px}

/* the example brief: a static picture of the owner app's home screen, built from the same tokens */
.phone{
  width:min(100%,370px);border-radius:28px;border:1px solid var(--ink-hair);overflow:hidden;
  background:var(--hanji);box-shadow:0 2px 0 var(--ink-hair);
  font-size:15px;line-height:1.45;color:var(--ink);text-align:left;
}
.p-banner{background:#B5311B;color:#fff;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:8px 10px 7px}
.p-head{display:flex;justify-content:center;padding:10px 10px 2px}
.p-head .burger{width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.p-head .burger svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round}
.p-logo{display:flex;align-items:center;justify-content:center;gap:7px;font-size:18px;font-weight:500;letter-spacing:.02em}
.p-logo .mk{width:27px;height:23px;color:var(--ink)}
.p-logo .seal{width:15px;height:15px;transform:rotate(-4deg)}
.p-date{padding:8px 18px 0;font-size:12.5px;color:var(--ink-soft)}
.p-greet{padding:0 18px;font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.2;margin:2px 0 0}
.p-box{margin:14px 16px 0;padding:16px 16px 16px;border:2px solid var(--alert);border-radius:16px;background:var(--hanji-card);background-image:linear-gradient(var(--alertbg),var(--alertbg))}
.p-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--vtext);margin:0}
.p-big{margin:6px 0 0;font-size:44px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.p-big .red{color:var(--vtext)}
/* the words under the amount get a line of their own, like the owner app's Home */
.p-big .unit{display:block;margin-top:6px;font-size:15px;font-weight:500;line-height:1.35;color:var(--ink-soft);letter-spacing:0}
.p-lead{margin:8px 0 0;font-size:14.5px;line-height:1.4}
.p-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;min-height:46px;border-radius:13px;background:var(--ink);color:var(--on-ink);font-weight:600;font-size:14.5px}
.p-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.p-list{list-style:none;margin:12px 16px 0;display:flex;flex-direction:column;gap:9px}
.p-list li{display:flex;align-items:center;gap:11px;padding:12px 14px 12px 13px;border:1px solid var(--ink-hair);border-radius:15px;background:var(--hanji-card)}
.p-num{flex:0 0 auto;width:28px;height:28px;border-radius:999px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.p-item{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.p-title{font-weight:600;font-size:15px}
.p-amt{font-size:14.5px;color:var(--ink-soft)}
.p-amt b{color:var(--vtext);font-weight:600}
.p-chev{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-glance{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:22px 18px 0}
.p-h2{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.25;margin:0}
.p-sub{font-size:12.5px;color:var(--ink-soft);margin:0}
.p-icons{display:flex;gap:6px}
.p-icons span{width:36px;height:36px;border-radius:999px;border:1px solid var(--ink-hair);background:var(--hanji-card);display:flex;align-items:center;justify-content:center}
.p-icons svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.p-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 16px 18px}
.p-tile{padding:12px 12px 11px;border:1px solid var(--ink-hair);border-radius:14px;background:var(--hanji-card);display:flex;flex-direction:column;gap:2px}
.p-tl{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink-soft)}
.p-tl svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.p-tv{font-size:21px;font-weight:600;line-height:1.2;margin-top:2px}
.p-ts{font-size:12.5px;color:var(--ink-soft)}
.p-tile svg.spark{width:100%;height:24px;margin-top:6px}
.p-tile svg.spark polyline{fill:none;stroke:var(--ink-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.p-tile svg.spark circle{fill:var(--vermilion)}
@media (max-width:860px){
  .brief{grid-template-columns:1fr}
  .phone-wrap{margin-top:10px}
}
@media (max-width:540px){
  .cta{align-items:stretch}
  .cta .btn{width:100%}
}

/* ================= proof row ================= */
.proof{padding-top:0;padding-bottom:0}
.proof ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid var(--ink-hair);border-bottom:1px solid var(--ink-hair);padding:26px 0;margin-top:clamp(48px,7vw,88px)}
.proof li{font-size:15.5px;color:var(--ink-soft);padding:0 6px}
.proof li b{display:block;color:var(--ink);font-weight:600}
@media (max-width:860px){ .proof ul{grid-template-columns:1fr;gap:14px;padding:20px 0} }

/* ================= the math ================= */
.math-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} /* four problems, two by two */
.mcard{background:var(--hanji-card);border:1px solid var(--ink-hair);border-radius:18px;padding:30px 28px 28px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:16px;align-content:start;align-items:center}
.mcard > :not(.mnum):not(h3){grid-column:1 / -1}
.mcard .mnum{width:32px;height:32px;border-radius:999px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex:0 0 auto}
.mcard h3{margin-bottom:0}
.mcard p{font-size:15.5px;color:var(--ink-soft)}
.mcard .eq{font-family:var(--serif);font-size:17px;color:var(--ink);padding:12px 14px;border-radius:12px;background:var(--hanji);border:1px solid var(--ink-hair)}
.mcard .eq b{color:var(--vtext);white-space:nowrap}
.mcard .todo{color:var(--ink)}
.mcard .todo b{font-weight:600}
.math-total{margin-top:var(--space-title-gap);text-align:center;font-family:var(--serif);font-size:clamp(19px,2.4vw,23px)}
.math-total b{color:var(--vtext)}
.math-note{margin:28px auto 0;max-width:640px;text-align:center;font-size:15px;color:var(--ink-soft)}
.math .center{text-align:center;margin-top:var(--space-title-gap)}
@media (max-width:860px){ .math-grid{grid-template-columns:1fr} }

/* ================= how it works ================= */
.steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:var(--space-title-gap)}
.steps li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:14px;align-content:start;align-items:center}
.steps li > p{grid-column:1 / -1}
.steps .snum{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-weight:600;font-size:16px}
.steps h3{font-size:21px;margin-bottom:0}
/* side by side on wide screens: every title gets two lines of room, so the text below starts level across the row.
   The titles are flex boxes, so a title with inline markup wraps its words in one span to keep the spaces. */
@media (min-width:861px){ .steps h3,.mcard h3{display:flex;align-items:center;min-height:2.5em} }
.steps p{color:var(--ink-soft);font-size:15.5px}
.steps p.status{margin-top:-4px;font-size:14.5px}
.steps p.status b{color:var(--ink)}
.how .center{text-align:center}
@media (max-width:860px){ .steps{grid-template-columns:1fr;gap:28px} }

/* ================= vision: the information plane ================= */
.flow-wrap{max-width:880px;margin:0 auto}
.flow{width:100%;height:auto;display:block}
.flow .node rect{fill:var(--hanji-card);stroke:var(--ink);stroke-width:1.5;transition:fill .2s,stroke .2s}
.flow .node text{font-family:var(--sans);font-size:14.5px;font-weight:600;fill:var(--ink);text-anchor:middle;dominant-baseline:middle}
.flow .node .sub{font-size:10.5px;font-weight:400;fill:var(--ink-soft)}
.flow .node{cursor:pointer;outline:none}
.flow .node:hover rect,.flow .node.active rect{fill:var(--paper);stroke:var(--vermilion)}
.flow .node:focus-visible rect{fill:var(--paper);stroke:var(--vermilion);stroke-width:3}
.flow .wire{stroke:var(--ink-line);stroke-width:1.5;fill:none;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.4s ease .2s}
.flow-wrap.on .wire{stroke-dashoffset:0}
.flow .pulse{stroke:var(--vermilion);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:14 240;opacity:0;transition:opacity .5s ease 1.4s}
.flow-wrap.on .pulse{opacity:1}
.flow .core-wm{font-family:"Jost",sans-serif;font-size:27px;font-weight:500;fill:var(--ink);text-anchor:middle;letter-spacing:.02em}
@media (prefers-reduced-motion:no-preference){
  .flow .pulse{animation:travel 3.2s linear infinite}
  @keyframes travel{to{stroke-dashoffset:-254}}
  /* The dashes repaint on every frame (stroke-dashoffset cannot run on the GPU), so they pause while the diagram is off
     screen and pick up where they were when it comes back. The script adds .in-view, or adds it for good if it cannot watch. */
  html.js .flow-wrap:not(.in-view) .pulse{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .flow .wire{stroke-dashoffset:0;transition:none}
  .flow .pulse{display:none}
}
.flow-stacked > .wire,.flow-stacked > .pulse{display:none}
.flow-stacked .node text{font-size:17px}
.flow-stacked .node .sub{font-size:12.5px}
@media (max-width:760px){ .flow-wrap{max-width:440px} }
.flow-caption{margin:26px auto 0;min-height:56px;text-align:center;color:var(--ink-soft);font-size:15.5px;max-width:620px}
.flow-caption strong{color:var(--ink)}
.flow-caption .tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--ink-hair);border-radius:999px;padding:2px 8px;vertical-align:2px}

/* ================= security strip ================= */
.band{background:var(--band-bg);color:var(--band-fg);text-align:center;border-top:1px solid var(--ink-hair)} /* no bottom edge: the closing block below starts in the same black */
.band .eyebrow{color:var(--band-accent)}
.band h2{color:var(--band-fg)}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-bottom:40px}
.band-item h3{font-size:19px;color:var(--band-fg)}
.band-item p{color:var(--band-fg-soft);font-size:15.5px;max-width:300px;margin:0 auto}
.band-item .bullet{display:block;width:14px;height:14px;background:var(--vermilion);border-radius:4px;transform:rotate(-2deg);margin:0 auto 18px}
.band a.textlink{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--band-fg);font-weight:500;text-decoration-thickness:1px;text-underline-offset:4px}
.band a.textlink:hover{color:var(--band-accent)}
@media (max-width:860px){ .band-grid{grid-template-columns:1fr;gap:30px} }

/* ================= every channel, your language ================= */
.chan-strip{display:flex;align-items:center;max-width:760px;margin:0 auto 48px} /* 48px from the tiles to the phone, and from the phone to the note (Victor, Oct 21) */
/* One row of tabs. The padding keeps focus rings inside the scroll box; the negative margin keeps the tiles on the column edges. */
.chan-tabs{position:relative;flex:1 1 auto;min-width:0;display:flex;gap:10px;padding:6px;margin:-6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 6px;scrollbar-width:none}
.chan-tabs::-webkit-scrollbar{display:none}
.chan-tab{flex:1 0 120px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:64px;padding:10px 14px;border:1.5px solid var(--ink-line);border-radius:14px;background:var(--hanji-card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.chan-tab:hover{border-color:var(--ink-soft)}
.chan-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.chan-tab .ch{font-weight:600;font-size:15.5px;line-height:1.3}
.chan-tab .lg{font-size:14px;line-height:1.3}
.chan-tab .st{margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;border:1px solid currentColor;border-radius:999px;padding:0 8px}
/* When the four tiles do not fit, the script adds .more: two tiles to a view, with bare chevrons beside them reaching into the gutter. */
.chan-arr{display:none;flex:0 0 auto;width:44px;height:44px;align-items:center;justify-content:center;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ink-soft);cursor:pointer;transition:color .2s,opacity .2s}
.chan-arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chan-arr:hover{color:var(--ink)}
.chan-arr:disabled{opacity:.3;cursor:default;color:var(--ink-soft)}
.chan-strip.more{margin-left:-12px;margin-right:-12px}
.chan-strip.more .chan-arr{display:flex}
.chan-strip.more .chan-tabs{margin:-6px 0}
.chan-strip.more .chan-tab{flex:0 0 calc((100% - 10px) / 2)}
@media (max-width:359px){ .chan-strip.more .chan-tab{padding-left:10px;padding-right:10px} }
/* Each example conversation sits on a plain phone, its screen drawn in the look of the app it happens in (colors and layout
   only, no app logos). The owner's own messages are on the right, as on their phone; the screens follow the site's light or dark theme. */
.stage{max-width:760px;margin:0 auto}
.chan-panel{display:flex;flex-direction:column;align-items:center;min-width:0}
/* With the script, every conversation shares one phone: the panels stack in one grid cell, so nothing below moves on a tab change.
   Inactive panels keep their space without being seen, read or focused.
   A class, not the hidden attribute: a stylesheet that forces [hidden] to display:none (the preview host has one, so do some resets) would collapse them. */
html.js .stage{display:grid}
html.js .chan-panel{grid-area:1 / 1}
html.js .chan-panel.inactive{visibility:hidden}
html:not(.js) .chan-strip{display:none}
html:not(.js) .chan-panel + .chan-panel{margin-top:56px}
@media (max-width:374px){ html:not(.js) .device{aspect-ratio:auto;height:auto} html:not(.js) .scroller{overflow:visible} }
.chan-panel:focus-visible{outline:none}
.chan-panel:focus-visible .device{outline:3px solid var(--vermilion);outline-offset:6px}
.stage-note{margin-top:48px;max-width:560px;text-align:center;font-size:14px;color:var(--ink-soft)}
.stage-note b{color:var(--ink)}

.device{
  position:relative;width:min(100%,372px);aspect-ratio:372 / 806;min-height:0;padding:10px;border-radius:56px;background:#101011;
  box-shadow:inset 0 0 0 1.5px #303033,0 2px 6px rgba(26,23,20,.16),0 30px 60px -28px rgba(26,23,20,.5);
}
/* the side buttons */
.device::before,.device::after{content:"";position:absolute;width:3px;border-radius:2px;background:#29292c}
.device::before{left:-3px;top:19%;height:6.5%;box-shadow:0 64px 0 #29292c}
.device::after{right:-3px;top:24%;height:10%}
/* Phones and tablets: the tiles and the whole phone fit on one screen under the header, so reading and tapping need no
   page scroll (Victor, Oct 22). The width follows the height left over (the viewport less 280px: the header, the tiles,
   the 48px gap, and room for a browser toolbar floating at the bottom), at most the column or 372px, and at least 240px,
   below which the chat gets cramped. svh is the viewport with the browser's bars showing; the vh line before it is for
   iOS 15.0 to 15.3, which do not know svh. The 280px is written out in both: with a var() in them, the svh line would be
   valid when parsed and win, then fail on those phones and leave the phone with no width limit at all.
   With the script only: without it every conversation shows whole on a full-size phone, since nothing scrolls the chat.
   Desktop keeps the full-size phone. */
@media (max-width:860px){
  html.js .device{
    width:max(min(240px,100%),min(100%,372px,calc((100vh - 280px) * 372 / 806)));
    width:max(min(240px,100%),min(100%,372px,calc((100svh - 280px) * 372 / 806)));
  }
}
.screen{
  position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:46px;
  background:var(--app-head);color:var(--app-fg);text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.36;
}
/* the camera, and the home bar */
.screen::before{content:"";position:absolute;z-index:2;top:12px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#0a0a0b;box-shadow:inset 0 0 0 2.5px #1b1b1e}
.screen::after{content:"";position:absolute;z-index:2;bottom:7px;left:50%;width:124px;height:4.5px;margin-left:-62px;border-radius:3px;background:var(--app-fg);opacity:.85}
.screen .ico{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:var(--app-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:40px;padding:5px 26px 0 32px;font-size:14.5px;font-weight:600;letter-spacing:.01em}
.sbar .sb-icons{width:64px;height:11.5px;color:var(--app-fg)}
/* the profile picture: our mark with its ai seal, as in the logo */
.avatar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:1px;width:36px;height:36px;border-radius:50%;background:#EBE2CE;color:#1A1714}
.avatar .mk{width:17px;height:15px}
.avatar .av-seal{flex:0 0 auto;width:9px;height:9px;align-self:flex-end;margin-bottom:9px;transform:rotate(-4deg)}
.app-head{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;min-height:52px;padding:0 12px 6px 8px;background:var(--app-head);border-bottom:.5px solid var(--app-line)}
.app-head > :last-child{justify-self:end}
.hd-back{display:inline-flex;align-items:center;font-size:16px;color:var(--app-accent)}
.hd-title{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.hd-title b{font-size:16px;font-weight:600}
.hd-title small{font-size:12.5px;color:var(--app-sub)}
.scroller{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:8px 12px 14px;background:var(--app-wall);scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.day-chip{align-self:center;margin:4px 0 4px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:500;line-height:1.5;background:var(--chip-bg);color:var(--chip-fg)}
.thread{list-style:none;display:flex;flex-direction:column}
.bubble{position:relative;max-width:80%;margin-top:8px;padding:6px 11px 7px;border-radius:17px;overflow-wrap:break-word}
.bubble.from-you{align-self:flex-end;background:var(--out-bg);color:var(--out-fg);border-bottom-right-radius:6px}
.bubble.from-ahreum{align-self:flex-start;background:var(--in-bg);color:var(--in-fg);border-bottom-left-radius:6px}
.bubble.from-you + .bubble.from-you,.bubble.from-ahreum + .bubble.from-ahreum{margin-top:3px}
/* a tail on the last message of each run, drawn in the bubble's own color. A clip shape (the curve in five points), not an image
   mask, which about triples the paint work while the messages replay. */
.bubble.tail::before{content:"";position:absolute;bottom:0;width:9px;height:17px;background:inherit;-webkit-clip-path:polygon(0 0,6.6% 34%,26% 61.7%,57.4% 83.4%,100% 100%,0 100%);clip-path:polygon(0 0,6.6% 34%,26% 61.7%,57.4% 83.4%,100% 100%,0 100%)}
.bubble.from-you.tail{border-bottom-right-radius:0}
.bubble.from-you.tail::before{right:-8px}
.bubble.from-ahreum.tail{border-bottom-left-radius:0}
.bubble.from-ahreum.tail::before{left:-8px;transform:scaleX(-1)}
/* in the chat apps the side and color say who is talking; the names stay for screen readers */
.bubble .who{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bubble .msg{display:block}
.bubble [lang="ko"]{white-space:normal}
.bubble .tr{display:block;margin-top:3px;font-size:12.5px;font-style:italic;line-height:1.35;color:var(--tr-in)}
.bubble.from-you .tr{color:var(--tr-out)}
/* the time sits in the last line's corner; an empty box at the end of the text keeps the words clear of it */
.msg-time{position:absolute;right:10px;bottom:5px;display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:1;color:var(--time-in)}
.from-you .msg-time{color:var(--time-out)}
.msg-time .ticks{width:16px;height:10px;color:var(--ticks)}
.bubble > :last-child::after{content:"";display:inline-block;width:var(--time-w,0px);height:1px;font-size:11px}
.app-tg .bubble.from-you,.app-wa .bubble.from-you{--time-w:calc(2.4em + 26px)}
.app-tg .bubble.from-ahreum,.app-wa .bubble.from-ahreum{--time-w:calc(2.4em + 8px)}
.composer{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:7px 12px 25px;background:var(--app-head);border-top:.5px solid var(--app-line)}
.cmp-input{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:0 6px 0 13px;border:.5px solid var(--app-line);border-radius:18px;background:var(--app-input);color:var(--app-sub);font-size:15px}
@media (prefers-reduced-motion:no-preference){
  .chan-panel.wait .bubble{opacity:0} /* until its phone is fully in view (site.js) */
  .chan-panel.play .bubble{animation:bubbleIn .4s ease both;animation-delay:calc(var(--i) * .35s)}
  @keyframes bubbleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (max-width:400px){ .screen{font-size:14.5px} .bubble{max-width:84%} }

/* Telegram: back to Chats, the name and "bot" in the middle, the picture on the right; a soft green wallpaper and pale green for you */
.app-tg{--app-head:#F7F7F7;--app-fg:#000;--app-sub:#707579;--app-accent:#2481CC;--app-line:rgba(0,0,0,.14);--app-input:#fff;
  --app-wall:radial-gradient(circle at 12% 10%,#DBDDBB 0,transparent 58%),radial-gradient(circle at 92% 28%,#6BA587 0,transparent 56%),radial-gradient(circle at 10% 88%,#88B884 0,transparent 60%),radial-gradient(circle at 88% 95%,#D5D88D 0,transparent 58%),#A9C79A;
  --chip-bg:rgba(36,58,30,.42);--chip-fg:#fff;--in-bg:#fff;--in-fg:#000;--out-bg:#EFFEDD;--out-fg:#000;
  --tr-in:#4E5459;--tr-out:#3F5A33;--time-in:#6F767B;--time-out:#3D8A33;--ticks:#3D8A33}
.app-tg .composer .ico{stroke:var(--app-sub)}
/* Messages: the contact's picture and name in the middle, gray for 아름, text message green for you (darkened enough for white text) */
.app-sms{--app-head:#F9F9F9;--app-fg:#000;--app-sub:#6C6C70;--app-accent:#007AFF;--app-line:rgba(0,0,0,.16);--app-input:#fff;--app-wall:#fff;
  --in-bg:#E9E9EB;--in-fg:#000;--out-bg:#1F8539;--out-fg:#fff;--tr-in:#4A4A4E;--tr-out:#fff}
.app-sms .app-head{grid-template-columns:44px minmax(0,1fr) 44px;padding-top:2px}
.app-sms .hd-contact{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px}
.app-sms .hd-contact .avatar{width:42px;height:42px}
.app-sms .hd-contact .avatar .mk{width:20px;height:17px}
.app-sms .hd-contact .avatar .av-seal{width:10px;height:10px;margin-bottom:11px}
.app-sms .hd-name{display:inline-flex;align-items:center;color:var(--app-fg)}
.app-sms .hd-name .ico{width:12px;height:12px;stroke:var(--app-sub);stroke-width:2.6}
.sms-intro{align-self:center;margin:6px 0 2px;text-align:center;font-size:11.5px;line-height:1.35;color:var(--app-sub)}
.sms-intro::first-line{font-weight:600}
.app-sms .bubble{border-radius:18px}
.app-sms .bubble.from-you{border-bottom-right-radius:18px}
.app-sms .bubble.from-ahreum{border-bottom-left-radius:18px}
.app-sms .bubble.from-ahreum + .bubble.from-ahreum{border-top-left-radius:6px}
.app-sms .bubble.from-ahreum:not(.tail){border-bottom-left-radius:6px}
.app-sms .bubble.tail.from-you{border-bottom-right-radius:0}
.app-sms .bubble.tail.from-ahreum{border-bottom-left-radius:0}
.app-sms .cmp-input .ico{width:20px;height:20px;stroke:var(--app-sub)}
.cmp-round{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#E9E9EB}
.cmp-round .ico{width:20px;height:20px;stroke:#6C6C70;stroke-width:2.2}
/* WhatsApp: picture and name on the left, video and call on the right, a beige wallpaper, light green for you, the tail at the top */
.app-wa{--app-head:#F6F5F3;--app-fg:#111B21;--app-sub:#667781;--app-accent:#1DAA61;--app-line:rgba(17,27,33,.14);--app-input:#fff;--app-wall:#EFEAE2;
  --chip-bg:#fff;--chip-fg:#54656F;--in-bg:#fff;--in-fg:#111B21;--out-bg:#D9FDD3;--out-fg:#111B21;
  --tr-in:#4A5A63;--tr-out:#3E5246;--time-in:#667781;--time-out:#5C6E66;--ticks:#2C9CD6}
.app-wa .app-head{display:flex;gap:8px}
.app-wa .hd-back{margin-right:-4px}
.app-wa .hd-title{flex:1 1 auto;align-items:flex-start}
.app-wa .hd-acts{display:flex;gap:18px;margin-right:4px}
.app-wa .day-chip{box-shadow:0 1px .5px rgba(11,20,26,.13)}
.app-wa .bubble{border-radius:9px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.app-wa .bubble.from-you.tail{border-radius:9px 0 9px 9px}
.app-wa .bubble.from-ahreum.tail{border-radius:0 9px 9px 9px}
.app-wa .bubble.tail::before{top:0;bottom:auto;width:8px;height:13px}
.app-wa .bubble.from-you.tail::before{transform:scaleY(-1)}
.app-wa .bubble.from-ahreum.tail::before{transform:scale(-1,-1)}
.app-wa .bubble.from-you + .bubble.from-you,.app-wa .bubble.from-ahreum + .bubble.from-ahreum{margin-top:4px}
.app-wa .bubble.tail{margin-top:10px}
.app-wa .composer .ico{stroke:var(--app-fg)}
.app-wa .composer > .ico:first-child{stroke-width:2}
/* the call: dark in either theme, the caller's view of the Ahreum line; here the names show, as there is no app color to tell them apart */
.app-call{--app-head:transparent;--app-fg:#fff;--app-sub:rgba(255,255,255,.72);--app-accent:#fff;--app-wall:transparent;
  --in-bg:rgba(255,255,255,.14);--in-fg:#fff;--out-bg:rgba(255,255,255,.26);--out-fg:#fff;--tr-in:#fff;--tr-out:#fff}
.app-call .screen{background:linear-gradient(180deg,#3A342E 0%,#211D1A 46%,#121110 100%)}
.call-top{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding:14px 16px 6px}
.call-top .avatar{width:58px;height:58px;margin-bottom:10px}
.call-top .avatar{gap:2px}
.call-top .avatar .mk{width:27px;height:23px}
.call-top .avatar .av-seal{width:14px;height:14px;margin-bottom:15px}
.call-name{font-size:25px;font-weight:500;line-height:1.2}
.call-time{margin-top:2px;font-size:15px;color:var(--app-sub);font-variant-numeric:tabular-nums}
.app-call .scroller{padding-top:14px}
.app-call .thread{margin:auto 0} /* centered while it fits; when it overflows, the top stays reachable (justify-content:center would cut it off) */
.app-call .bubble{border-radius:16px;max-width:86%}
.app-call .bubble .who{position:static;width:auto;height:auto;margin:0 0 2px;overflow:visible;clip:auto;display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.84)}
.app-call .bubble .who[lang="ko"]{font-size:12.5px;letter-spacing:0;text-transform:none}
/* 56px keys 26px apart on a full-size phone; on the smaller phones that fit a phone's screen, keys and gaps shrink with it */
.call-keys{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,min(56px,24%));justify-content:center;column-gap:min(26px,8%);row-gap:16px;padding:12px 0 34px}
.call-key,.call-end{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.18)}
.call-key .ico{width:24px;height:24px}
.call-key .dots{fill:#fff;stroke:none}
.call-end{grid-column:2;background:#EB4E3D}
.call-end .ico{width:28px;height:28px;fill:#fff;stroke:none;transform:rotate(135deg)}

/* the same apps in their dark looks */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .device{box-shadow:inset 0 0 0 1.5px #3A3A3E,0 0 0 1px rgba(235,226,206,.16),0 30px 70px -24px rgba(0,0,0,.8)}
  :root:not([data-theme="light"]) .app-tg{--app-head:#17212B;--app-fg:#F5F5F5;--app-sub:#8B9AA7;--app-accent:#5EB5F7;--app-line:rgba(255,255,255,.08);--app-input:#242F3D;
    --app-wall:radial-gradient(circle at 15% 15%,#1D3445 0,transparent 55%),radial-gradient(circle at 85% 80%,#1B2E3F 0,transparent 55%),#0E1621;
    --chip-bg:rgba(30,44,58,.85);--chip-fg:#DCE6EF;--in-bg:#182533;--in-fg:#F5F5F5;--out-bg:#2B5278;--out-fg:#fff;
    --tr-in:#AAB8C4;--tr-out:#C7D8EA;--time-in:#8597A6;--time-out:#A6C4E2;--ticks:#7FC2F5}
  :root:not([data-theme="light"]) .app-sms{--app-head:#161618;--app-fg:#fff;--app-sub:#98989F;--app-line:rgba(255,255,255,.16);--app-input:#000;--app-wall:#000;
    --in-bg:#262629;--in-fg:#fff;--tr-in:#C3C3C8}
  :root:not([data-theme="light"]) .cmp-round{background:#2C2C2F}
  :root:not([data-theme="light"]) .cmp-round .ico{stroke:#A1A1A7}
  :root:not([data-theme="light"]) .app-wa{--app-head:#1F2C34;--app-fg:#E9EDEF;--app-sub:#8696A0;--app-accent:#00A884;--app-line:rgba(233,237,239,.1);--app-input:#2A3942;--app-wall:#0B141A;
    --chip-bg:#182229;--chip-fg:#8696A0;--in-bg:#202C33;--in-fg:#E9EDEF;--out-bg:#005C4B;--out-fg:#E9EDEF;
    --tr-in:#AEBAC1;--tr-out:#C4DED7;--time-in:#8696A0;--time-out:#A9CCC3;--ticks:#53BDEB}
}
:root[data-theme="dark"] .device{box-shadow:inset 0 0 0 1.5px #3A3A3E,0 0 0 1px rgba(235,226,206,.16),0 30px 70px -24px rgba(0,0,0,.8)}
:root[data-theme="dark"] .app-tg{--app-head:#17212B;--app-fg:#F5F5F5;--app-sub:#8B9AA7;--app-accent:#5EB5F7;--app-line:rgba(255,255,255,.08);--app-input:#242F3D;
  --app-wall:radial-gradient(circle at 15% 15%,#1D3445 0,transparent 55%),radial-gradient(circle at 85% 80%,#1B2E3F 0,transparent 55%),#0E1621;
  --chip-bg:rgba(30,44,58,.85);--chip-fg:#DCE6EF;--in-bg:#182533;--in-fg:#F5F5F5;--out-bg:#2B5278;--out-fg:#fff;
  --tr-in:#AAB8C4;--tr-out:#C7D8EA;--time-in:#8597A6;--time-out:#A6C4E2;--ticks:#7FC2F5}
:root[data-theme="dark"] .app-sms{--app-head:#161618;--app-fg:#fff;--app-sub:#98989F;--app-line:rgba(255,255,255,.16);--app-input:#000;--app-wall:#000;
  --in-bg:#262629;--in-fg:#fff;--tr-in:#C3C3C8}
:root[data-theme="dark"] .cmp-round{background:#2C2C2F}
:root[data-theme="dark"] .cmp-round .ico{stroke:#A1A1A7}
:root[data-theme="dark"] .app-wa{--app-head:#1F2C34;--app-fg:#E9EDEF;--app-sub:#8696A0;--app-accent:#00A884;--app-line:rgba(233,237,239,.1);--app-input:#2A3942;--app-wall:#0B141A;
  --chip-bg:#182229;--chip-fg:#8696A0;--in-bg:#202C33;--in-fg:#E9EDEF;--out-bg:#005C4B;--out-fg:#E9EDEF;
  --tr-in:#AEBAC1;--tr-out:#C4DED7;--time-in:#8696A0;--time-out:#A9CCC3;--ticks:#53BDEB}

/* ================= hear 아름 ================= */
.hear{padding-top:0}
.hear-card{
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  background:var(--hanji-card);border:1px solid var(--ink-hair);border-radius:20px;padding:clamp(24px,4vw,40px);
}
.hear-card h2{font-size:clamp(23px,3vw,30px);margin-bottom:8px}
.hear-card p{color:var(--ink-soft);max-width:560px}
.hear-card .eyebrow{color:var(--vtext)}
.hear-card .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.hear-card .eyebrow .tag{display:inline-block;margin:0;padding:0 9px;border:1px solid currentColor;border-radius:999px;color:var(--ink);font-size:11.5px;letter-spacing:.1em;line-height:1.6;vertical-align:1px;white-space:nowrap}
.hear-card .tel{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:12px;border:1.5px solid var(--ink);text-decoration:none;font-weight:600;font-size:19px;white-space:nowrap;color:var(--ink);transition:background .2s}
.hear-card .tel:hover{background:var(--hanji)}
.hear-card .tel svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){ .hear-card{grid-template-columns:1fr} .hear-card .tel{justify-content:center;max-width:420px} }
@media (max-width:540px){ .hear-card .tel{max-width:none} }

/* ================= closing block (kept from the live site) ================= */
/* It plays over a close-out at a client's restaurant (Dal Pocha, with Victor's OK): chairs set, the drawer counted, the
   POS closed out, the lights off and a held black. Over the block's top padding it fades in from the band's black, so the
   band and the video read as one dark scene; through the text, and a while below the button, it is clear but for a light
   tint. Then it sinks into the dark, and only once the dark is solid does it ease into the footer's paper, light or dark,
   so no shape in the footage (a door frame, a pole) streaks across the light paper (Victor, Oct 23). The fades follow an
   S curve, its blends worked out ahead for each theme (the --closeout-* colors), so every browser draws the same one. The text stays at 4.5:1 or better against the brightest value every pixel reaches in the whole loop, at
   every width from 320 to 2560 (measured): the paragraphs are solid cream, and a faint oval sits behind TALK TO US, whose
   coral is darker. The grade is baked into the file, so nothing is filtered per frame. */
.closeout{position:relative;isolation:isolate;overflow:hidden;background:var(--band-bg);color:var(--band-fg)}
.closeout-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;pointer-events:none}
.closeout::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  --eyebrow-oval:radial-gradient(ellipse 210px 48px at 50% calc(var(--space-section) + 9px),rgba(14,12,10,.6),rgba(14,12,10,.4) 55%,rgba(14,12,10,0) 100%);
  background:var(--eyebrow-oval),linear-gradient(var(--band-bg) 0,
    var(--closeout-in-1) calc(var(--space-section) * .25),
    var(--closeout-in-2) calc(var(--space-section) * .5),
    var(--closeout-in-3) calc(var(--space-section) * .75),
    rgba(14,12,10,.3) var(--space-section),
    rgba(14,12,10,.3) calc(100% - var(--space-section) * .7),
    var(--closeout-out-1) calc(100% - var(--space-section) * .56),
    var(--closeout-out-2) calc(100% - var(--space-section) * .42),
    var(--closeout-out-3) calc(100% - var(--space-section) * .28),
    var(--closeout-out-4) calc(100% - var(--space-section) * .14),
    var(--hanji-seen) 100%);
}
.closeout .contact::before{display:none}
.closeout .contact .eyebrow{color:var(--band-accent)}
.closeout .contact h2{color:var(--band-fg)}
.closeout .contact p{color:var(--band-fg)}
.closeout .contact strong{color:var(--band-fg)}
.closeout .contact .btn.primary{background:var(--band-fg);border-color:var(--band-fg);color:#1A1714}
.closeout .contact .btn.primary:hover{background:var(--vermilion);border-color:var(--vermilion);color:var(--on-accent)}
/* The pause sits in the block's bottom corner, where the video has eased into the footer's paper: a bare icon in the
   footer's own ink, light or dark, with a halo of the paper, in a 45px tap area (Victor, Oct 23). Full ink, not the soft
   ink of the footer's icons: on a phone the top of the icon meets the gradient's mid tones, and it keeps 3:1 there. It
   stays in ink on hover and focus too (vermilion would fall under 3:1 on those mid tones); a mouse grows it a little, and
   the keyboard gets the site's focus ring. */
.closeout-pause{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;justify-content:center;width:45px;height:45px;padding:0;border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .closeout-pause svg{transition:transform .2s}
  .closeout-pause:hover svg{transform:scale(1.15)}
}
.closeout-pause svg{width:22px;height:22px;fill:currentColor;filter:drop-shadow(0 0 3px var(--hanji-seen))}
.closeout-pause .i-play,.closeout-pause.is-paused .i-pause{display:none}
.closeout-pause.is-paused .i-play{display:block}
html:not(.js) .closeout-pause,.closeout-pause.is-off{display:none}
section.contact{text-align:center}
.contact .eyebrow{margin-bottom:22px;color:var(--vtext);line-height:1.5}
.contact h2{margin-bottom:26px}
.contact p{color:var(--ink-soft);max-width:560px;margin:0 auto;line-height:1.85}
.contact p + p{margin-top:22px}
.contact .cta-seat{white-space:nowrap}
/* one sentence of the kept copy always gets a line to itself, unbroken */
.contact .own-line{display:block;white-space:nowrap;font-size:min(1em,4.6vw)}
@media (max-width:760px){ .contact p .cta-seat{display:block;font-size:min(1em,4.8vw)} }
.contact .btn.mail{margin-top:96px;min-height:56px;padding:0 34px;font-size:18px}
footer .locale{margin:0 auto 22px;font-size:13px;letter-spacing:.18em}

/* ================= footer ================= */
footer{padding:48px 0 calc(96px + env(safe-area-inset-bottom,0px));text-align:center;font-size:14px;letter-spacing:.06em;color:var(--ink-soft)}
footer .social{display:flex;justify-content:center;gap:4px;margin-bottom:22px}
footer .social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:var(--ink-soft);transition:color .2s,background .2s}
footer .social a:hover{color:var(--vtext);background:var(--hanji-card)}
footer .social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
footer .fseal{width:16px;height:16px;display:inline-block;vertical-align:-3px;transform:rotate(-4deg);margin-right:8px}
footer .locale{white-space:nowrap}
footer .links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;margin-top:6px}
footer .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:inherit;text-decoration:none}
footer .links a:hover{color:var(--vtext);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){ footer{padding-bottom:calc(120px + 80px + env(safe-area-inset-bottom,0px))} } /* room for the overlaying iOS Chrome toolbar */

/* entrance rise-in, one shot; only when the script that adds .on is running */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  html.js .reveal.on{opacity:1;transform:none}
  /* Sections the three second fallback shows while they are off screen take their end state at once (see revealAll). */
  html.js .reveal.no-trans,html.js .flow-wrap.no-trans .wire,html.js .flow-wrap.no-trans .pulse{transition:none}
}

/* ================= inner pages: the checkup, POS, security ================= */
section.wrap.page-hero{padding-top:clamp(64px,10vw,120px);padding-bottom:clamp(36px,5vw,60px)}
.page-hero .section-head{margin-bottom:0}
.page-hero h1{font-size:clamp(34px,5.6vw,54px);line-height:1.15;margin:0 auto 18px;max-width:20ch}
.page-hero .section-sub{font-size:clamp(17.5px,2vw,19.5px)}
section.wrap.page-body{padding-top:clamp(16px,3vw,32px)}
/* the closing ask on the inner pages, spaced to the owner's screenshots (Oct 21) */
.page-cta{text-align:center;margin-top:clamp(88px,8.3vw,121px)}
.page-cta p{color:var(--ink-soft);margin-bottom:clamp(48px,4.9vw,71px)}
section.wrap.ends-cta{padding-bottom:calc(var(--space-section) - 44px)}
.topnav > a[aria-current="page"]:not(.btn){color:var(--ink)}


/* cards on the inner pages */
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-card{background:var(--hanji-card);border:1px solid var(--ink-hair);border-radius:18px;padding:clamp(20px,3vw,30px)}
.info-card h2{font-size:clamp(22px,2.8vw,27px);margin-bottom:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.info-card p{color:var(--ink-soft)}
.info-card p + p{margin-top:10px}
@media (max-width:860px){ .card-grid.three{grid-template-columns:1fr} }
/* where the three titles wrap unevenly, give each two lines so the text below starts level */
@media (min-width:861px) and (max-width:1100px){ .card-grid.three .info-card h2{min-height:2.6em} }
@media (max-width:760px){ .card-grid{grid-template-columns:1fr} }


/* a second block inside a page's section (the Profit page's How we find it, the POS page's Works with the POS you already have) */
.sub-block{margin-top:clamp(72px,9vw,112px)}
.info-card .card-note{margin-top:14px;font-size:15px}
.info-card .card-note b{color:var(--ink)}
/* side by side, the Live and Coming lines sit level at the foot of each card */
.money-card{display:flex;flex-direction:column}
.money-card .card-note{margin-top:auto;padding-top:14px}
/* on the POS page the four cards keep the width of the POS list below them */
.card-grid.pos-fit{max-width:760px;margin:0 auto}
.pos-fit .info-card h2{display:block;font-size:21px;margin-bottom:8px} /* card titles under the page's h1, sized like the other card titles */

/* POS: one even list, the name on the left and its line on the right; stacked on phones */
.pos-list{max-width:760px;margin:0 auto;padding:4px clamp(20px,3vw,30px)}
.pos-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);column-gap:28px;align-items:baseline;padding:22px 0;border-top:1px solid var(--ink-hair)}
.pos-row:first-child{border-top:0}
.pos-list .pos-row h3{display:block;font-size:clamp(20px,2.4vw,24px);margin:0}
.pos-row p{color:var(--ink-soft);margin:0}
@media (max-width:620px){ .pos-row{grid-template-columns:minmax(0,1fr);row-gap:6px;padding:18px 0} }

/* security: the five promises */
.promises{list-style:none;counter-reset:promise;display:grid;gap:14px;max-width:760px;margin:0 auto}
.promises li{counter-increment:promise;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start;background:var(--hanji-card);border:1px solid var(--ink-hair);border-radius:18px;padding:clamp(18px,3vw,26px)}
.promises li::before{content:counter(promise);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--on-ink);font-weight:600;font-size:16px}
.promises h2{font-size:clamp(20px,2.6vw,24px);margin:2px 0 6px}
.promises p{color:var(--ink-soft)}
.contact-lines{text-align:center;color:var(--ink-soft);margin-top:36px}
.contact-lines a{display:inline-block;padding:10px 2px;margin:-10px 0;color:var(--ink)}

/* the checkup form */
.form-card{max-width:680px;margin:0 auto;background:var(--hanji-card);border:1px solid var(--ink-hair);border-radius:18px;padding:clamp(20px,4vw,40px)}
.req-note{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px}
.req{color:var(--vtext);font-weight:600}
.field{margin-bottom:20px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
@media (max-width:620px){ .field-row{grid-template-columns:1fr} }
/* City, State and ZIP share a row. State is never narrower than "District of Columbia" with iPhone text (8% wider) and the
   arrow; on a phone the city takes its own line, and below 420px State and ZIP each take one too. A message for any of the
   three runs under the whole row (checkup.js), not down the narrow ZIP column. */
.field-row.addr{grid-template-columns:minmax(0,1fr) minmax(212px,1.2fr) minmax(92px,.7fr)}
@media (max-width:620px){ .field-row.addr{grid-template-columns:minmax(212px,1fr) minmax(92px,.6fr)} .field-row.addr > .field:first-child{grid-column:1 / -1} }
@media (max-width:420px){ .field-row.addr{grid-template-columns:minmax(0,1fr)} }
.field-row.addr > .field-error{grid-column:1 / -1;margin:-12px 0 20px}
.field > label,.choice legend{display:block;font-weight:600;font-size:15.5px;line-height:1.4;margin-bottom:8px;padding:0}
.field input{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--ink-line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;font-size:17px;line-height:1.3}
.field select{width:100%;min-height:50px;padding:12px 40px 12px 14px;border:1px solid var(--ink-line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;font-size:17px;line-height:1.3;-webkit-appearance:none;appearance:none}
.field select:invalid{color:var(--ink-soft)} /* still on Choose */
.field select option{color:var(--ink)}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--vermilion);outline-offset:1px}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.choice[aria-invalid="true"] .chip > span{border-color:var(--vermilion);box-shadow:0 0 0 1px var(--vermilion)}
.tel-wrap{position:relative}
.tel-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-soft);pointer-events:none}
.field .tel-wrap input{padding-left:42px;font-variant-numeric:tabular-nums}
.hint{font-size:14.5px;color:var(--ink-soft);margin-top:8px;line-height:1.55}
.choice{border:0;margin:0 0 22px;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip > span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--ink-line);border-radius:999px;background:var(--paper);font-size:16px;line-height:1.2;transition:background .2s,color .2s,border-color .2s}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.chip input:focus-visible + span{outline:3px solid var(--vermilion);outline-offset:2px}
.pos-other{margin:12px 0 0}
.send-panel{margin:-8px 0 22px;padding:24px;border:1px solid var(--ink-hair);border-radius:14px;background:var(--paper)}
.send-panel[hidden]{display:none}
.send-panel > p{font-size:15.5px;color:var(--ink-soft);line-height:1.55}
.send-panel .btn{margin-top:14px;min-height:46px;font-size:15.5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the file input sits just before its visible label, so the label shows the input's keyboard focus and invalid state */
#c-files:focus-visible + .file-pick{outline:3px solid var(--vermilion);outline-offset:3px}
#c-files[aria-invalid="true"] + .file-pick,.send-panel.send-invalid{border-color:var(--vermilion);box-shadow:0 0 0 1px var(--vermilion)}
.field-error{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--vtext);font-weight:500;overflow-wrap:break-word}
.progress-pct{margin-top:6px;min-height:1.4em;font-size:14px;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums}
.field input::placeholder{color:var(--ink-soft);opacity:1}
#c-email{text-transform:lowercase}
#c-upload > p:first-child{text-align:center;text-wrap:balance}
/* the picked files sit beside Add files while a row of them has room for a readable name, and wrap under it when not */
.file-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 16px;margin-top:22px}
.send-panel .hint{margin-top:22px}
@media (max-width:420px){ .send-panel{padding-left:18px;padding-right:18px} }
.file-row .file-pick{flex:none;margin-top:0}
.file-list{flex:1 1 264px;min-width:0;list-style:none;margin:0}
.file-list:empty{display:none}
.file-list li{display:flex;align-items:center;gap:10px;padding:1px 0;border-top:1px solid var(--ink-hair);font-size:15px}
.file-list li:first-child{border-top:0}
/* a long name loses its middle, so its end and extension always show */
.file-list .fname{flex:1 1 auto;min-width:0;display:flex}
.file-list .fhead{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:pre}
.file-list .ftail{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre}
.file-list .fsize{flex:0 0 auto;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.file-list button{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.file-list button:hover{color:var(--vtext)}
.file-list svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.consent{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:16px;border:1px solid var(--ink-hair);border-radius:14px;background:var(--paper);margin:4px 0 22px;font-size:15.5px;line-height:1.55}
/* Drawn by the site, not the browser: a native checkbox can render dark in light mode on some systems. */
.consent input{-webkit-appearance:none;appearance:none;display:grid;place-content:center;width:24px;height:24px;margin:1px 0 0;border:1.5px solid var(--ink-line);border-radius:7px;background:var(--paper);cursor:pointer;transition:background .15s,border-color .15s}
.consent input::after{content:"";width:12px;height:7px;border:solid var(--on-accent);border-width:0 0 2.5px 2.5px;transform:translateY(-2px) rotate(-45deg) scale(0);transition:transform .15s ease}
.consent input:checked{background:var(--vermilion);border-color:var(--vermilion)}
.consent input:checked::after{transform:translateY(-2px) rotate(-45deg) scale(1)}
.consent input:focus-visible{outline:3px solid var(--vermilion);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .consent input,.consent input::after{transition:none} }
.consent label{cursor:pointer}
.consent .links{display:block;margin-top:8px;font-size:14px}
.consent .links a{display:inline-block;padding:12px 2px;margin:-12px 0} /* 44px to tap, like the home page's inline links */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.turnstile{min-height:65px;margin-bottom:18px}
.form-card .btn.primary{width:100%}
.progress{height:6px;margin-top:16px;border-radius:999px;background:var(--ink-hair);overflow:hidden}
.progress[hidden]{display:none}
.progress span{display:block;height:100%;background:var(--vermilion);transform-origin:left center;transform:scaleX(0);transition:transform .2s linear}
.form-status{margin-top:12px;min-height:1.6em;font-size:15.5px;color:var(--ink-soft);overflow-wrap:break-word}
.form-status.error{color:var(--vtext);font-weight:500}
.done{max-width:620px;margin:0 auto;text-align:center}
.done[hidden]{display:none}
.done h2:focus{outline:none}
.done p{color:var(--ink-soft)}
.done p + p{margin-top:12px}
.done .lines > span{display:block;text-wrap:balance} /* each sentence starts its own line (Victor, Oct 23) */
.nojs{max-width:620px;margin:0 auto;text-align:center;color:var(--ink-soft)}
html.js .nojs{display:none}
html:not(.js) .form-card{display:none}
.turnaround{max-width:760px;margin:32px auto 0;text-align:center;color:var(--ink-soft);font-size:15.5px}
.turnaround > span{display:block;text-wrap:balance} /* each sentence starts its own line and wraps evenly (Victor, Oct 23) */