/*
  Otto's identity, applied to the page that sells it.

  Same tokens as the product, from apps/web/src/app/globals.css, so a
  prospect who clicks through recognises the thing they land in. The rules
  are the product's rules, unchanged:

    - Yellow is a FILL. Never text, never a stroke, never a button.
    - The ink sitting on the yellow is what carries the contrast.
    - Green is money in, red is money out, and they mean nothing else.
*/
:root{
  --paper:#F6F6F3;--surface:#FFFFFF;--inset:#FDFAF1;
  --panel:#15291D;--panel-ink:#FFFFFF;
  --line:#D8D8CE;--line-strong:#868F84;
  --ink:#15291D;--ink-soft:#536257;--ink-faint:#737E73;
  --positive:#187C49;--negative:#B63132;
  --positive-bright:#6CD092;--negative-bright:#FF958D;
  --brand:#f2cf3b;--brand-ink:#15291d;--brand-wash:#fcf4d4;--focus:#a99129;
  --s1:#D9A400;--s2:#2563EB;--s3:#E07A1F;--s4:#0E8FA8;--s5:#A32C8E;
  --font-sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:16px;
  --space:clamp(4rem,2.6rem + 5.4vw,7.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
/* No smooth scrolling. The page is 12,000px tall and a smooth jump from the
   header to the form whips the whole thing past the reader for two seconds.
   scroll-margin-top keeps the sticky header off the heading it lands on. */
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
   stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* The highlighter. One phrase per screen, the mark an accountant makes on
   the line that matters, and the only way yellow can carry a headline. */
.hl{position:relative;display:inline;isolation:isolate;font-style:normal}
.hl::before{content:"";position:absolute;z-index:-1;left:-.05em;right:-.05em;
  bottom:.16em;height:.44em;background:var(--brand);border-radius:.04em}

.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:1rem;
}
.kicker::before{content:"";width:22px;height:3px;background:var(--brand);border-radius:2px}

/* ---------- header ------------------------------------------------------ */
header{
  position:sticky;top:0;z-index:80;
  background:rgba(246,246,243,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
header .wrap{display:flex;align-items:center;gap:1.5rem;height:66px}
.logo{display:flex;align-items:center;color:var(--ink);flex-shrink:0}
nav.top{display:flex;gap:1.5rem;margin-left:auto;font-size:.9rem;font-weight:500}
nav.top a{color:var(--ink-soft)}
nav.top a:hover{color:var(--ink)}
@media (max-width:900px){nav.top{display:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:44px;padding:0 1.15rem;border-radius:12px;
  font-size:.94rem;font-weight:600;white-space:nowrap;
  border:1px solid transparent;transition:transform .16s var(--ease),background .16s;
}
.btn:hover{transform:translateY(-1px)}
.btn.pri{background:var(--panel);color:var(--panel-ink)}
.btn.sec{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn.sec:hover{background:var(--inset)}
.btn.sm{height:38px;padding:0 .9rem;font-size:.86rem;border-radius:10px}
.btn.lg{height:52px;padding:0 1.6rem;font-size:1rem}

/* ---------- hero -------------------------------------------------------- */
/* clip, not hidden: the wash below bleeds 10% past each edge on purpose, and
   without this it adds 144px of horizontal scroll to the whole page. clip
   contains it without turning the hero into a scroll container. */
.hero{padding:calc(var(--space)*.7) 0 calc(var(--space)*.55);position:relative;
  overflow-x:clip}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto;height:90%;pointer-events:none;
  background:radial-gradient(44% 58% at 22% 24%,rgba(242,207,59,.20),transparent 70%);
}
.hero .wrap{position:relative;z-index:1}
h1{
  font-size:clamp(2.5rem,1.1rem + 5.2vw,4.9rem);line-height:1.02;
  letter-spacing:-.04em;font-weight:600;max-width:18ch;text-wrap:balance;
}
.twocol h1{font-size:clamp(2.4rem,1rem + 3.7vw,4.1rem)}
.lede{margin-top:1.4rem;font-size:1.14rem;line-height:1.55;color:var(--ink-soft);max-width:56ch}
.hero>.wrap:not(.twocol)>.shot,.hero .badges{margin-top:2.2rem}
.hero .lede+.tag{margin-top:1.2rem}
/* A hero that is only words (/product/, /integrations/, /security/) has nothing
   under the lede to occupy the space the section rhythm leaves below it, so the
   page opens on a hole between the sentence and the first card. Close it, and
   leave the heroes that carry a screenshot, badges or buttons alone. */
.hero:has(>.wrap>.lede:last-child){padding-bottom:calc(var(--space)*.18)}


/* ---------- sections ---------------------------------------------------- */
section{padding:calc(var(--space)*.62) 0}
section[id]{scroll-margin-top:80px}
h2{font-size:clamp(1.7rem,1.15rem + 1.9vw,2.4rem);letter-spacing:-.03em;line-height:1.12;font-weight:600;max-width:26ch;text-wrap:balance}
.wrap>h2{margin-bottom:1.6rem}
.wrap>.kicker+h2,.wrap>h2+.lede{margin-bottom:0}
.wrap>.lede{margin:.6rem 0 1.8rem}
.twocol h2{margin-bottom:.9rem}
.twocol>div>p{color:var(--ink-soft);max-width:52ch}
.twocol>div>p+p{margin-top:.9rem}
.twocol>div>.badges{margin:1.3rem 0 1.5rem}
.dark .twocol>div>p{color:rgba(255,255,255,.72)}
section.cta h2{margin:0 auto}
.ground{background:var(--surface);border-block:1px solid var(--line)}
.dark{background:var(--panel);color:var(--panel-ink)}
.dark .card p{color:rgba(255,255,255,.72)}
.dark .kicker{color:rgba(255,255,255,.6)}
.dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.dark .card h3{color:#fff}

.ground .card{background:var(--inset)}
.card h3{font-size:1.06rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:.93rem}


/* ---------- faq ----------------------------------------------------------- */
details:not(.mnav){border-top:1px solid var(--line);padding:1.15rem 0}
details:not(.mnav):last-of-type{border-bottom:1px solid var(--line)}
:not(.mnav)>summary{
  cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;
  display:flex;gap:1rem;align-items:flex-start;
}
summary::-webkit-details-marker{display:none}
details:not(.mnav)>summary::after{content:"+";margin-left:auto;color:var(--ink-faint);font-weight:400;font-size:1.3rem;line-height:1}
details:not(.mnav)[open]>summary::after{content:"\2212"}
details:not(.mnav) .a,details:not(.mnav) p{color:var(--ink-soft);margin-top:.7rem;max-width:76ch;font-size:.96rem}

/* ---------- the form ------------------------------------------------------ */
form{display:grid;gap:.85rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media (max-width:520px){.f2{grid-template-columns:1fr}}
label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.35rem}
input,select,textarea{
  width:100%;height:46px;padding:0 .85rem;border-radius:12px;font:inherit;font-size:.95rem;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);
}
textarea{height:auto;padding:.7rem .85rem;resize:vertical;min-height:88px;line-height:1.5}
.hp{position:absolute;left:-9999px}
.formnote{font-size:.82rem;color:var(--ink-faint)}

/* ---------- footer -------------------------------------------------------- */
footer{border-top:1px solid var(--line);background:var(--surface)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- country

   The half of the page that is not this visitor's country is removed, not
   dimmed: `display:none` keeps it out of the tab order and out of a screen
   reader's reading, so a UAE visitor never hears a word about JoFotara.

   `!important` because several of these live inside rules that set their own
   display (flex rows, grid cards, the marquee). */
[data-country="ae"] .c-jo,
[data-country="jo"] .c-ae{display:none!important}

/* The picker, sitting next to the demo button. Not tucked in the footer:
   landing on the wrong country's page is the one mistake worth making easy
   to fix, and it is the only thing on the page that says Otto does both. */
.cpick{position:relative;flex:none}
.cpick>button{display:inline-flex;align-items:center;gap:.5rem;height:38px;padding:0 .7rem;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);
  color:var(--ink);font:inherit;font-size:.86rem;font-weight:500;cursor:pointer}
.cpick>button:hover{background:var(--inset)}
.cpick .flag{width:22px;height:11px;border-radius:2px;display:block;flex:none;
  box-shadow:0 0 0 1px rgba(21,41,29,.14)}
.cpick .chev{width:12px;height:12px;opacity:.55;flex:none}
.cpick .menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:264px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:.3rem;
  box-shadow:0 12px 32px rgba(21,41,29,.14)}
.cpick .menu[hidden]{display:none}
.cpick .menu button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.5rem .6rem;
  border:0;border-radius:9px;background:none;color:var(--ink);font:inherit;font-size:.9rem;
  text-align:left;cursor:pointer}
.cpick .menu button:hover{background:var(--inset)}
.cpick .menu button[aria-current="true"]{font-weight:600}
.cpick .menu button>span{white-space:nowrap}
.cpick .menu .sub{display:block;font-size:.76rem;color:var(--ink-soft);font-weight:400}
.cpick .menu .tick{margin-left:auto;opacity:0;width:14px;height:14px;flex:none}
.cpick .menu button[aria-current="true"] .tick{opacity:1}
@media (max-width:600px){.cpick .lbl{display:none}.cpick>button{padding:0 .55rem}}

/* ---------- the phone menu ------------------------------------------------
   nav.top disappears at 900px; this carries the same top-level links. A
   <details>, so it opens with no JavaScript. The panel is absolute against the
   sticky header, which keeps the header exactly 66px tall whether open or not. */
.mnav{display:none;flex:none}
.mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--surface);color:var(--ink)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:none}
.mnav summary:hover{background:var(--inset)}
.mnav>ul{position:absolute;left:0;right:0;top:100%;z-index:70;list-style:none;
  background:var(--surface);border-bottom:1px solid var(--line-strong);
  box-shadow:0 18px 40px -22px rgba(21,41,29,.45);padding:.4rem 24px 1rem;
  display:grid;gap:.15rem}
.mnav>ul a{display:block;width:100%;padding:.75rem .25rem;font-size:1rem;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--line)}
.mnav>ul li:last-child a{border-bottom:0}
@media (max-width:900px){
  .mnav{display:block}
  /* nav.top carried the margin-left:auto that pushed the right-hand group over;
     with it gone the picker takes the job, and the gap tightens so the logo,
     picker, menu button and CTA still fit a 375px header. */
  header .wrap{gap:.55rem}
  .cpick{margin-left:auto}
}

/* ---------- v2 components ----------------------------------------------- */
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
[hidden]{display:none!important}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column;gap:.6rem}
.card h3{font-size:1.05rem;letter-spacing:-.01em}
.card p{color:var(--ink-soft);font-size:.94rem}
.card .kicker{margin-bottom:.2rem}
.grid.three{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.chip{display:inline-flex;align-items:center;min-height:30px;padding:.2rem .7rem;border-radius:8px;line-height:1.3;background:var(--inset);border:1px solid var(--line);font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.02em}
.tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.tag.live::before{background:var(--positive)}
.tag.file::before{background:var(--s1)}
.tag.request::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.chip .tag{font-size:.62rem;letter-spacing:.06em;margin-left:.35rem}
.chip .tag::before{width:5px;height:5px}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:1rem}
.card.option dl.opt{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;font-size:.86rem}
dl.opt dt{color:var(--ink-faint)}
.card.option{gap:.5rem}
.card.option .tag{margin-top:auto;padding-top:.2rem}
.steps{counter-reset:s;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{list-style:none;counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem}
.steps li h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.3rem}
.steps li p{color:var(--ink-soft);font-size:.9rem}
.steps li::before{content:counter(s);display:flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px;background:var(--brand);color:var(--brand-ink);font-weight:700;font-family:var(--font-mono);margin-bottom:.6rem}
.shot{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:0 20px 60px -30px rgba(21,41,29,.35)}
.shot img{display:block;width:100%;height:auto}
.badges{display:flex;flex-wrap:wrap;gap:.5rem}

/* Brand logos. Each file carries its own colours, so nothing here recolours a
   mark; the rules only size and align them. Otto's own glyphs are stroke icons
   and sit in a round inset disc so they read as icons, not as a brand. */
.logo-img{display:block;object-fit:contain;max-width:100%}
.logo-row{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.glyph-disc{width:40px;height:40px;border-radius:50%;background:var(--inset);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);flex:none}
.cardtop{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;min-height:40px}
.brand{font-family:var(--font-sans);font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.logo-strip{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.logo-strip+p{margin-top:1.2rem}
.logo-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.5rem;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;color:inherit;transition:border-color .14s}
.logo-tile:hover{border-color:var(--line-strong)}
.logo-tile .logo-row{justify-content:center;min-height:40px;max-width:100%}
.logo-tile .logo-row.many{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;justify-items:center;align-items:center;width:100%}
.logo-tile .name{font-size:.85rem;font-weight:500;line-height:1.3}
/* Every tile in a row is the same height, so pinning the dot to the bottom puts
   every dot on one line. Without it a two-line name drops its dot below the
   dots beside it and the row reads as ragged. */
.logo-tile .tag{font-size:.62rem;letter-spacing:.06em;margin-top:auto;padding-top:.15rem}
.twocol{display:grid;gap:2rem;grid-template-columns:1fr 1fr;align-items:center}
/* Centring works while both columns are about the same height. Against the demo
   form, which is twice the height of the words beside it, it pushes the heading
   into the middle of the page and leaves a hole above it. */
.twocol.start{align-items:start}
/* Without this a wide hero panel (four brand marks in a row) sets the column's
   automatic minimum and pushes the whole hero past the phone viewport. */
.twocol>*{min-width:0}
@media (max-width:820px){.twocol{grid-template-columns:1fr}}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;font-size:.9rem}
.specs dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.specs dd{margin-top:.2rem;font-weight:500}
.ba{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media (max-width:640px){.ba{grid-template-columns:1fr}}
.ba div{border-radius:var(--r);padding:1.25rem;border:1px solid var(--line)}
.ba .after{background:var(--brand-wash)}
nav.top .dd{position:relative}
nav.top .dd>a::after{content:" \25BE";font-size:.7em}
nav.top .dd ul{position:absolute;top:100%;left:-.75rem;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.5rem;display:none;list-style:none;box-shadow:0 12px 40px -20px rgba(21,41,29,.4)}
nav.top .dd:hover ul,nav.top .dd:focus-within ul{display:block}
nav.top .dd li a{display:block;padding:.45rem .75rem;border-radius:8px}
nav.top .dd li a:hover{background:var(--inset)}
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

footer .frow{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between;align-items:flex-start;padding:2.6rem 24px 1.8rem}
footer .fbrand{max-width:280px}footer .fbrand a{display:inline-block;color:var(--ink)}footer .fbrand p{margin-top:.6rem;font-size:.88rem;color:var(--ink-soft)}
footer .flinks{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:.9rem;max-width:560px}footer .flinks a{color:var(--ink-soft)}footer .flinks a:hover{color:var(--ink)}
footer .fline{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;padding:1.2rem 24px 2.2rem;font-size:.82rem;color:var(--ink-faint);border-top:1px solid var(--line)}footer .fline a{color:var(--ink-soft)}
.thanks{padding:2rem 0;font-size:1.1rem}
.formerr{color:var(--negative);margin-top:.75rem;font-size:.9rem}
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r)*1.4);padding:clamp(1.25rem,3vw,2rem)}
.fast{margin-top:1.4rem;color:var(--ink-soft);font-size:.94rem}
/* A link inside a sentence. Without this the global a{color:inherit} leaves it
   indistinguishable from the words around it, which is what "See every
   integration." and the two addresses on /security/ were doing. */
.fast a,main p>a:not(.btn){font-weight:600;color:var(--ink);border-bottom:2px solid var(--brand);padding-bottom:1px}

/* ---------- the two homes -------------------------------------------------- */
.browser{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r)*1.4);padding:clamp(.6rem,1.6vw,1.1rem)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;padding:.15rem .5rem .7rem}
.bar .dots{display:block;width:11px;height:11px;border-radius:50%;background:var(--line);box-shadow:18px 0 var(--line),36px 0 var(--line)}
.url{flex:1 1 8rem;min-width:0;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto;text-align:center;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);background:var(--inset);border:1px solid var(--line);border-radius:8px;padding:.24rem .8rem}
#demoFrame{width:100%;height:min(78vh,760px);border:1px solid var(--line);border-radius:var(--r);display:block;background:var(--paper)}
#jump{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.1rem 0}
#jump button{font:inherit;font-size:.84rem;font-weight:500;cursor:pointer;height:34px;padding:0 .8rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);transition:border-color .14s,color .14s,background .14s}
#jump button:hover{border-color:var(--line-strong);color:var(--ink)}
#jump button[aria-pressed="true"]{background:var(--panel);border-color:var(--panel);color:var(--panel-ink);font-weight:600}
.cap{margin-top:1rem;font-size:.92rem;color:var(--ink-soft);display:flex;gap:.75rem;align-items:flex-start;min-height:3.2rem}
.ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.5rem 0}
.proof{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.9rem;color:var(--ink-soft)}
.proof li::before{content:"\2713  ";color:var(--positive)}
.narrow{max-width:760px}
section.cta{text-align:center}section.cta p{margin:.75rem 0 1.5rem}
a.card{color:inherit}a.card:hover{border-color:var(--line-strong)}
.ctarow{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.ctarow .next{margin-left:auto;font-weight:500;color:var(--ink-soft)}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.filters button{height:36px;padding:0 .9rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:.86rem;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--panel);color:var(--panel-ink);border-color:var(--panel)}
.wordmark{display:flex;align-items:center;justify-content:center;gap:1rem;padding:clamp(2rem,5vw,4rem) 1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r)*1.4)}
.chip.big{height:64px;padding:0 1.5rem;font-size:1.1rem;font-family:var(--font-sans);font-weight:600}
.chip.big.otto{background:var(--brand);border-color:var(--brand)}
.wordmark .logo-row{gap:1.2rem;justify-content:center;max-width:240px}
.wordmark .logo-row.many{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;justify-items:center;align-items:center;width:240px}
@media (max-width:520px){
  .wordmark{gap:.7rem;padding:1.6rem .9rem}
  .wordmark .arrow{width:24px}
  .wordmark .logo-row,.wordmark .logo-row.many{max-width:none;width:auto;min-width:0}
  .wordmark .logo-row.many{grid-template-columns:repeat(2,minmax(0,auto))}
  .wordmark .logo-img{max-width:100%;height:auto}
}
.wordmark .arrow{width:48px;height:2px;background:var(--line-strong);position:relative}
.wordmark .arrow::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left-color:var(--line-strong)}
.diagram{width:100%;height:auto;max-width:760px;display:block;margin:0 auto;color:var(--ink)}
section.diag{padding-top:0}
/* The phone reading of the same diagram. An SVG scales its text with the box,
   so the 12px labels in a 720-unit viewBox land at about 5px in a phone column.
   Under 700px the drawing is replaced by the same nodes as real text. */
.flow{display:none}
.flownote{display:none}
@media (max-width:700px){
  .diagram{display:none}
  .flow{display:grid;gap:.5rem;list-style:none;max-width:420px;margin:0 auto;padding:0}
  .flow li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem}
  .flow li.on{background:var(--brand);border-color:var(--brand)}
  .flow b{display:block;font-weight:600;font-size:.98rem;letter-spacing:-.01em}
  .flow span{display:block;margin-top:.15rem;font-size:.85rem;color:var(--ink-soft)}
  .flow li.on span{color:var(--brand-ink);opacity:.75}
  .flow li+li{margin-top:1.4rem;position:relative}
  .flow li+li::before{content:"";position:absolute;left:50%;top:-1.15rem;width:2px;height:.9rem;background:var(--line-strong)}
  .flow li+li::after{content:"";position:absolute;left:50%;top:-.35rem;transform:translate(-50%,-100%) rotate(45deg);width:7px;height:7px;border-right:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong)}
  /* A second source feeding the same step, not a step after the first. */
  .flow li.also::after{display:none}
  .flow li.also::before{content:"and";position:static;display:block;width:auto;height:auto;background:none;margin:-1.15rem 0 .5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:center}
  .flow li.also{margin-top:.5rem;padding:0;border:0;background:none}
  .flow li.also b{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem}
  .flownote{display:block;max-width:420px;margin:.8rem auto 0;text-align:center;font-size:.82rem;color:var(--ink-faint)}
}
.shot.phone{max-width:300px;margin:0 auto;border-radius:28px;box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
.dark .shot{border-color:rgba(255,255,255,.18)}
.plainlist{list-style:none;display:grid;gap:.4rem;margin:1.4rem 0}
.plainlist li::before{content:"\2713  ";color:var(--positive)}

/* ---------- the Jordan hero rail --------------------------------------------
   The four steps that link a restaurant to JoFotara sit inside the hero, so a
   visitor on a 1440x900 laptop reads them without scrolling. Each step is one
   row: the number, then the words. */
.hero-steps{margin-top:clamp(2rem,4vw,3rem);padding-top:1.6rem;border-top:1px solid var(--line);
  grid-template-columns:repeat(4,1fr);gap:.85rem}
@media (max-width:940px){.hero-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.hero-steps{grid-template-columns:1fr}}
.hero-steps li{display:grid;grid-template-columns:26px 1fr;column-gap:.7rem;align-items:start;padding:.95rem 1rem}
.hero-steps li::before{width:26px;height:26px;border-radius:7px;font-size:.85rem;margin:0}
.hero-steps li h3{font-size:.95rem;margin-bottom:.2rem}
.hero-steps li p{font-size:.84rem;line-height:1.45;grid-column:2}
.hero .proof{margin-top:.2rem}