/* The design system, shared by every page on the public site.
 *
 * It used to be two: a calm teal sheet for the documents and a dark one for the landing page, on the
 * reasoning that a landing page is a poster and a legal page is a document. That reasoning is fine
 * and the result was not — two token sets on one site read as two sites, and they drift the first
 * time either is edited. There is one palette now and `home.css` holds only what the landing page
 * alone has.
 *
 * The palette is the mark's own, sampled from res/logo.png: hazard yellow #F2EB14, black #050607,
 * and the #DB2025 the wordmark's POS is set in. A key in a yellow tile is shop-floor signage, so the
 * whole site is built as signage.
 */
:root{
  --ink:#0A0A0B;          /* the ground */
  --ink-2:#111113;        /* a raised surface */
  --ink-3:#1A1A1D;        /* a surface on top of that */
  --edge:#2A2A2F;
  --paper:#F4F4F0;        /* receipt paper, used for text */
  --paper-dim:#9C9C98;
  --paper-faint:#6A6A68;
  --gold:#F2EB14;
  --gold-dim:#8A8712;
  --red:#DB2025;
  --sans:"Instrument Sans","IBM Plex Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  --display:"Archivo","IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(18px,4vw,44px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);
     font-size:clamp(1rem,.96rem + .2vw,1.06rem);line-height:1.62;word-break:keep-all;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--gold)}
img{display:block;max-width:100%;height:auto}

/* A film of noise over everything. Flat black at this size reads as an unlit screen; a little grain
   gives it a surface. Generated rather than fetched — the site has no external assets but its fonts. */
body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 var(--gut)}

/* ---- type ------------------------------------------------------------------------------------ */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:0}
h1{font-size:clamp(2.3rem,1.2rem + 3.5vw,4.5rem);text-transform:uppercase}
h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,3rem);text-transform:uppercase}
h3{font-size:1.12rem;letter-spacing:-.02em;line-height:1.25}
p{margin:0}
.lede{color:var(--paper-dim);font-size:clamp(1.02rem,.98rem + .4vw,1.18rem);max-width:56ch;line-height:1.62}
.tag,.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem;
     font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.tag::before,.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---- chrome ---------------------------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(10,10,11,.78);backdrop-filter:blur(14px);
        border-bottom:1px solid var(--edge)}
.topbar .wrap{display:flex;align-items:center;gap:14px;height:66px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;color:var(--paper)}
.logo img{width:31px;height:31px;flex:0 0 auto;object-fit:contain}
.logo .word{font-family:var(--display);font-weight:800;font-size:1.16rem;letter-spacing:-.045em}
.logo .word i{font-style:normal;color:var(--red)}
.topnav{display:flex;align-items:center;gap:3px}
.topnav a{padding:8px 12px;text-decoration:none;color:var(--paper-dim);font-size:.86rem;font-weight:600;
          transition:color .16s}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--paper)}
.topnav a.cta{margin-left:6px;padding:9px 17px;background:var(--gold);color:#0A0A0B;font-weight:700;
              clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.topnav a.cta:hover{background:#fff;color:#0A0A0B}
.langs{display:flex;border:1px solid var(--edge);flex:0 0 auto}
.langs button{padding:6px 10px;border:0;background:transparent;color:var(--paper-faint);
              font:inherit;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;
              cursor:pointer;transition:.15s}
.langs button[aria-pressed="true"]{background:var(--gold);color:#0A0A0B}
@media (max-width:760px){.topnav a:not(.cta){display:none}}

/* ---- buttons --------------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border:0;text-decoration:none;
     font-family:var(--display);font-weight:700;font-size:.96rem;letter-spacing:-.01em;cursor:pointer;
     background:var(--gold);color:#0A0A0B;clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);
     transition:background .16s,transform .16s}
.btn:hover{background:#fff;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--edge)}
.btn.ghost:hover{background:var(--ink-3);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.btn .arrow{font-family:var(--mono);font-size:1.05em}

/* ---- bands ----------------------------------------------------------------------------------- */
.band{padding:clamp(54px,8vw,110px) 0;border-bottom:1px solid var(--edge);position:relative}
.band.alt,.band.tint{background:var(--ink-2)}
.kicker{display:block;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.22em;
        text-transform:uppercase;color:var(--gold)}
.head{max-width:64ch}
.head h2,.band h2{margin:14px 0 0;max-width:26ch}
.head .lede,.band > .wrap > p{margin:18px 0 0;color:var(--paper-dim);max-width:62ch}
.band > .wrap > p strong{color:var(--paper);font-weight:700}

/* ---- cards ----------------------------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;
       margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--edge);border-left:1px solid var(--edge)}
.card{padding:28px 24px 30px;border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);
      position:relative;overflow:hidden;background:transparent}
.card::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);
             transition:width .35s cubic-bezier(.2,.8,.2,1)}
.card:hover::after{width:100%}

/* ---- a numbered box ---------------------------------------------------------------------------
   The number and the icon are the box's *background* rather than labels above the heading. At this
   size they read as texture, and the words get to start at the top of the box where the eye lands.

   Written once here rather than per section, because every page that shows a set of boxes wants the
   same thing: the landing page's features, cloud and counter, and the product page's two lists. A
   rule scoped to one section is a rule the next section copies and then drifts from.

   The icons are drawn, never typed. A character is whatever the reader's font decides it is, and
   that difference goes from invisible at 16px to unmissable at 130 — the same reason the app's own
   interface icons are paths. */
.numbered{position:relative;overflow:hidden;isolation:isolate}

.numbered .n{
  position:absolute;top:8px;right:16px;margin:0;display:block;
  font-family:var(--mono);font-size:clamp(3rem,5.2vw,4.4rem);font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--gold);opacity:.1;
  pointer-events:none;user-select:none;z-index:0}
/* Outlined where the browser can draw an outline, and a faint solid where it cannot — set
   transparent unconditionally, a browser without text-stroke shows no number at all. */
@supports (-webkit-text-stroke:1px currentColor){
  .numbered .n{color:transparent;-webkit-text-stroke:1.4px var(--gold);opacity:.2}
}

.numbered .mark{
  position:absolute;right:-20px;bottom:-24px;width:132px;height:132px;
  color:var(--gold);opacity:.07;pointer-events:none;z-index:0}
.numbered .mark svg{
  width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.05;
  stroke-linecap:round;stroke-linejoin:round}

/* The words ride above both, and the heading keeps a lane clear of the numeral. */
.numbered>h3,.numbered>p,.numbered>.opt{position:relative;z-index:1}
.numbered>h3{padding-right:74px}

/* They come up with the gold underline these boxes already draw on hover. */
.numbered .n,.numbered .mark{transition:opacity .35s cubic-bezier(.2,.8,.2,1)}
.numbered:hover .n{opacity:.32}
.numbered:hover .mark{opacity:.14}
@media (prefers-reduced-motion:reduce){.numbered .n,.numbered .mark{transition:none}}
.card .glyph{display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;
             border:1px solid var(--edge);color:var(--gold);font-family:var(--mono);font-size:.9rem}
.card p{margin-top:10px;font-size:.9rem;color:var(--paper-dim);line-height:1.58}

/* ---- feature rows with a screenshot ---------------------------------------------------------- */
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,54px);
     align-items:center;margin-top:clamp(30px,4vw,52px)}
.row.flip > .copy{order:2}
@media (max-width:880px){.row{grid-template-columns:1fr}.row.flip > .copy{order:0}}
.copy h3{margin:0;font-size:1.2rem}
.copy p{margin:12px 0 0;color:var(--paper-dim)}
.copy ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px}
/* The marker is positioned rather than a grid cell: as a two-column grid every inline element in a
   bullet became its own grid item and wrapped to the next row, so a bullet shattered the moment
   somebody emphasised a word inside it. */
.copy li{position:relative;padding-left:24px;font-size:.94rem;color:var(--paper-dim)}
.copy li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--gold)}
.shot{margin:0}
.shot img{width:100%;border:1px solid var(--edge);transition:border-color .2s,transform .3s}
.shot:hover img{border-color:var(--gold);transform:translateY(-3px)}
.shot figcaption{margin-top:11px;font-size:.83rem;color:var(--paper-faint);text-align:center}

/* ---- stat strip ------------------------------------------------------------------------------ */
.strip{display:flex;flex-wrap:wrap;margin-top:clamp(28px,4vw,46px);border-top:1px solid var(--edge)}
.strip div{flex:1 1 150px;padding:18px 20px 0 0}
.strip b{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--gold);
         letter-spacing:-.03em}
.strip span{display:block;margin-top:4px;font-size:.79rem;color:var(--paper-faint);line-height:1.35}

/* ---- pull quote ------------------------------------------------------------------------------ */
.pull{margin-top:clamp(28px,4vw,44px);padding:24px 26px;border-left:2px solid var(--gold);
      background:var(--ink-3);max-width:64ch}
.pull p{margin:0;font-size:1.05rem;color:var(--paper)}
.pull span{display:block;margin-top:10px;font-size:.85rem;color:var(--paper-faint)}

/* ---- tables ---------------------------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--edge);vertical-align:top}
thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
         color:var(--gold);font-weight:700}
tbody th{font-weight:700;color:var(--paper);white-space:nowrap}
td{color:var(--paper-dim)}
.scroller,.specs{overflow-x:auto}
.specs{margin-top:26px}
.specs table{min-width:460px}
.specs tbody th{width:34%}

/* ---- definition rows ------------------------------------------------------------------------- */
.spec{margin-top:clamp(28px,4vw,46px);border-top:1px solid var(--edge)}
.spec div{display:grid;grid-template-columns:minmax(140px,.32fr) minmax(0,1fr);gap:clamp(14px,3vw,40px);
          padding:20px 0;border-bottom:1px solid var(--edge);align-items:baseline}
.spec dt{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em}
.spec dd{margin:0;color:var(--paper-dim);font-size:.93rem}
@media (max-width:560px){.spec div{grid-template-columns:1fr;gap:4px}}

/* ---- long-form document ---------------------------------------------------------------------- */
.doc{max-width:78ch}
.doc h2{margin-top:44px;margin-bottom:14px;font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem)}
.layout .doc h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,3rem)}
.doc h3{margin:28px 0 8px;font-size:1.06rem}
.doc p{margin:0 0 13px;color:var(--paper-dim);max-width:72ch}
.doc p strong{color:var(--paper);font-weight:700}
.doc ul{padding-left:20px;color:var(--paper-dim);margin:0 0 14px}
.doc li{margin-bottom:8px}
.doc li strong{color:var(--paper)}
.updated{font-family:var(--mono);font-size:.78rem;color:var(--paper-faint);margin:14px 0 30px;
         letter-spacing:.04em}
kbd{display:inline-block;padding:1px 6px;border:1px solid var(--edge);border-bottom-width:2px;
    background:var(--ink-3);color:var(--paper);font-family:var(--mono);font-size:.84em;white-space:nowrap}
code{padding:1px 5px;background:var(--ink-3);color:var(--gold);font-family:var(--mono);font-size:.86em}
/* Deliberately loud: these are the fields that have to be filled in before the site is submitted for
   an SMS campaign review, and a carrier refuses a submission carrying placeholder contact details. */
.fillme{display:inline-block;padding:1px 8px;border:1px dashed var(--red);color:var(--red);
        font-family:var(--mono);font-size:.82rem}
.keyword{font-family:var(--mono);font-weight:700;color:var(--gold)}
.sample{margin:0 0 14px;padding:16px 18px;border:1px solid var(--edge);background:var(--ink-2)}
.sample b{display:block;margin-bottom:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
          text-transform:uppercase;color:var(--gold)}
.sample q{display:block;font-family:var(--mono);font-size:.86rem;line-height:1.65;quotes:none;
          color:var(--paper)}

/* ---- guide layout ---------------------------------------------------------------------------- */
.layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:clamp(24px,4vw,52px);
        align-items:start;padding:clamp(30px,4vw,50px) 0 0}
.rail{position:sticky;top:82px;max-height:calc(100vh - 104px);overflow-y:auto;
      scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-thumb{background:var(--edge)}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-button{display:none;height:0;width:0}
.rail b{display:block;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.2em;
        text-transform:uppercase;color:var(--paper-faint);margin-bottom:12px}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.rail a{display:grid;grid-template-columns:26px 1fr;gap:7px;padding:7px 9px;text-decoration:none;
        color:var(--paper-dim);font-size:.86rem;font-weight:500;border-left:2px solid transparent}
.rail a i{font-style:normal;color:var(--paper-faint);font-family:var(--mono);font-size:.76rem}
.rail a:hover{background:var(--ink-2);color:var(--paper)}
.rail a.here{border-left-color:var(--gold);background:var(--ink-2);color:var(--gold)}
.rail a.here i{color:var(--gold)}
.doc section{padding:0 0 clamp(36px,5vw,54px);border-top:0}
.doc section + section{padding-top:clamp(34px,4vw,48px);border-top:1px solid var(--edge)}
.rows{margin:16px 0;display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge)}
.rows > div{display:grid;grid-template-columns:minmax(130px,.5fr) minmax(0,1fr);gap:14px;
            background:var(--ink);padding:13px 16px}
.rows dt{font-weight:700;font-size:.9rem;color:var(--paper)}
.rows dd{margin:0;color:var(--paper-dim);font-size:.9rem}
@media (max-width:580px){.rows > div{grid-template-columns:1fr;gap:3px}}
.steps{margin:18px 0;padding:0;list-style:none;counter-reset:step;display:grid;gap:13px}
.steps li{position:relative;padding-left:42px;counter-increment:step}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--gold)}
.steps b{display:block;font-size:.98rem;color:var(--paper)}
.steps span{display:block;margin-top:4px;color:var(--paper-dim);font-size:.9rem}
.note{margin:18px 0;padding:18px 20px;border-left:2px solid var(--gold);background:var(--ink-2)}
.note b{display:block;margin-bottom:7px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
        text-transform:uppercase;color:var(--gold)}
.note p{margin:0 0 9px;font-size:.92rem;max-width:none}
.note p:last-child{margin:0}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.trio div{padding:17px;border:1px solid var(--edge);background:var(--ink-2)}
.trio h4{margin:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
         color:var(--gold);font-weight:700}
.trio b{display:block;margin:7px 0 6px;font-size:1rem;color:var(--paper)}
.trio p{margin:0;font-size:.89rem;color:var(--paper-dim)}
@media (max-width:920px){
  .layout{grid-template-columns:1fr}
  .rail{position:static;max-height:none;padding-bottom:20px;border-bottom:1px solid var(--edge)}
  .rail ol{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}

/* ---- forms ----------------------------------------------------------------------------------- */
.field{margin-bottom:16px;max-width:620px}
.field label{display:block;margin-bottom:7px;font-weight:600;font-size:.88rem;color:var(--paper)}
.field .hint{margin:6px 0 0;font-size:.82rem;color:var(--paper-faint)}
.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1px solid var(--edge);
  background:var(--ink-2);color:var(--paper);font:inherit}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:-2px;
  border-color:var(--gold)}
.field textarea{min-height:110px;resize:vertical}
.req{color:var(--red)}
.tabs{display:flex;gap:0;margin:28px 0 24px;border:1px solid var(--edge);width:fit-content;max-width:100%}
.tabs button{padding:12px 24px;border:0;background:transparent;color:var(--paper-dim);font:inherit;
             font-family:var(--display);font-weight:700;cursor:pointer;white-space:nowrap;transition:.16s}
.tabs button[aria-selected="true"]{background:var(--gold);color:#0A0A0B}
.consent{margin:26px 0 10px;padding:22px;border:1px solid var(--edge);background:var(--ink-2);max-width:620px}
.consent > h3{margin-bottom:5px}
.consent > p.sub{margin:0 0 16px;font-size:.86rem;color:var(--paper-faint)}
.opt{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:15px 0;border-top:1px solid var(--edge)}
.opt input{width:19px;height:19px;margin:3px 0 0;accent-color:var(--gold)}
.opt .body{font-size:.88rem;color:var(--paper-dim);line-height:1.6}
.opt .body strong{display:block;margin-bottom:5px;color:var(--paper);font-size:.94rem}
.consent .free{margin:15px 0 0;padding-top:15px;border-top:1px solid var(--edge);font-size:.83rem;
               color:var(--paper-faint)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.result{margin:22px 0 0;padding:16px 18px;font-weight:600;display:none;max-width:620px}
.result.show{display:block}
.result.ok{background:var(--ink-3);color:var(--gold);border-left:2px solid var(--gold)}
.result.bad{background:var(--ink-3);color:var(--red);border-left:2px solid var(--red)}

/* ---- footer ---------------------------------------------------------------------------------- */
footer{border-top:1px solid var(--edge);padding:44px 0 56px;background:var(--ink-2)}
footer .cols{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
footer .links{display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{color:var(--paper-dim);text-decoration:none;font-size:.87rem;font-weight:500}
footer a:hover{color:var(--gold)}
footer .fine{margin-top:30px;padding-top:22px;border-top:1px solid var(--edge);display:flex;
             flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
             font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--paper-faint)}

/* ---- motion ---------------------------------------------------------------------------------- */
/* Both hidden states are scoped to .js, which an inline script at the top of each document sets.
   Written unscoped, a page whose reveals depend on script is a blank page the moment the script is
   blocked, fails to parse, or has simply not run yet. */
.js .rise{opacity:0;transform:translateY(22px)}
.js .rise.in{opacity:1;transform:none;
             transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .load{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise,.js .load{opacity:1;transform:none;animation:none;transition:none}
  .btn:hover,.shot:hover img{transform:none}
}