/* INSTloop site: terracotta and ink, light only */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format("woff2")}
:root{--bg:#F8F5F0;--panel:#fff;--sand:#EFEAE2;--ink:#1D2A3A;--ink2:#26364A;--muted:#5F6976;--line:#E3DDD3;--acc:#BF5B37;--acc-hi:#A64B2A;--tint:#F7E6DE;
  --ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--cond:"IBM Plex Sans Condensed","Arial Narrow",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
a{color:var(--acc)} a:hover{color:var(--acc-hi)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
img{max-width:100%}
/* header */
header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:30px}
.wm{font:600 22px/1 var(--cond)} .wm b{color:var(--acc);font-weight:700}
nav{margin-left:auto;display:flex;gap:22px;font-size:15px} nav a{color:var(--ink);text-decoration:none;white-space:nowrap} nav a:hover{color:var(--acc)}
.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:11px 20px;border:1px solid var(--ink);border-radius:6px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;background:var(--panel);transition:background .15s,transform .15s}
.btn:hover{background:var(--sand);color:var(--ink);transform:translateY(-1px)}
.btn.solid{background:var(--acc);border-color:var(--acc);color:#fff} .btn.solid:hover{background:var(--acc-hi);color:#fff}
/* hero */
.hero{position:relative;overflow:hidden;padding:80px 0 0;background:
  radial-gradient(900px 420px at 85% -10%,var(--tint),transparent 70%),
  linear-gradient(var(--bg),var(--bg))}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;opacity:.45;mask-image:linear-gradient(#000,transparent 70%);-webkit-mask-image:linear-gradient(#000,transparent 70%)}
.hero .wrap{position:relative}
.eyebrow{display:inline-block;font:600 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 18px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:99px;background:var(--panel)}
h1{font:700 60px/1.04 var(--cond);margin:0 0 20px;max-width:880px;letter-spacing:-.015em}
h1 em{font-style:normal;color:var(--acc)}
.lead{font-size:20px;color:var(--muted);max-width:700px;margin:0 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta small{color:var(--muted);font-size:14px;margin-left:6px}
/* app window frame */
.win{margin:56px auto 0;border:1px solid #d9d2c6;border-radius:12px 12px 0 0;border-bottom:0;overflow:hidden;background:var(--panel);box-shadow:0 30px 80px rgba(29,42,58,.18)}
.win .bar{height:34px;background:var(--sand);display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--line)}
.win .bar i{width:11px;height:11px;border-radius:50%;background:#d6cec2}
.win .bar span{margin-left:12px;font:500 12px var(--mono);color:var(--muted)}
.win img{display:block;width:100%;height:auto}
/* flow strip */
.flow{background:var(--ink);color:#fff;padding:34px 0}
.flow ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 0;align-items:center;justify-content:center}
.flow li{font:600 15px var(--cond);letter-spacing:.02em;padding:8px 14px;border:1px solid #3B4C61;border-radius:6px;background:var(--ink2)}
.flow li.in{border-color:var(--acc);color:#F3C9B8}
.flow li+li::before{content:"→";color:var(--acc);margin:0 12px 0 -4px;position:relative;left:-14px;display:none}
.flow .arr{color:var(--acc);padding:0 10px;font:600 18px var(--mono)}
.flow p{text-align:center;color:#AEB8C4;margin:14px 0 0;font-size:15px}
/* sections */
section{padding:84px 0}
section.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{font:500 13px var(--mono);color:var(--acc);margin:0 0 10px}
h2{font:700 40px/1.1 var(--cond);margin:0 0 12px;letter-spacing:-.01em;max-width:820px}
.sub{color:var(--muted);max-width:720px;margin:0 0 40px;font-size:18px}
/* problem / answer */
.pa{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pa div{border-radius:10px;padding:28px}
.pa .p{background:var(--sand)} .pa .a{background:var(--ink);color:#fff}
.pa h3{font:600 14px var(--mono);letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px}
.pa .p h3{color:var(--muted)} .pa .a h3{color:#F3C9B8}
.pa ul{margin:0;padding:0;list-style:none}
.pa li{padding:10px 0 10px 26px;position:relative;border-top:1px solid rgba(0,0,0,.07)}
.pa .a li{border-color:rgba(255,255,255,.1);color:#E6EAEE}
.pa .p li::before{content:"×";position:absolute;left:4px;color:#A0968A;font-weight:600}
.pa .a li::before{content:"✓";position:absolute;left:2px;color:var(--acc);font-weight:600}
/* cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px;transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));box-shadow:0 12px 30px rgba(29,42,58,.08);transform:translateY(-2px)}
.card .ic{width:40px;height:40px;border-radius:8px;background:var(--tint);display:grid;place-items:center;margin-bottom:14px}
.card .ic svg{width:22px;height:22px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font:600 20px/1.25 var(--cond);margin:0 0 8px}
.card p{margin:0;color:var(--muted);font-size:15.5px}
/* feature rows */
.feat{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;margin-top:72px}
.feat:first-of-type{margin-top:0}
.feat.rev{grid-template-columns:7fr 5fr} .feat.rev .txt{order:2}
.feat h3{font:700 30px/1.15 var(--cond);margin:0 0 12px}
.feat p{color:var(--muted);margin:0 0 14px}
.feat ul{margin:0;padding:0;list-style:none} .feat li{padding:5px 0 5px 22px;position:relative}
.feat li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:2px;background:var(--acc)}
.frame{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(29,42,58,.12)}
.frame img{display:block;width:100%}
/* trust */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
ul.ticks{padding:0;list-style:none;margin:0} ul.ticks li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--line)}
ul.ticks li::before{content:"";position:absolute;left:3px;top:18px;width:12px;height:7px;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}
.std{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.std li{font:500 13px var(--mono);border:1px solid var(--line);background:var(--bg);border-radius:4px;padding:6px 11px}
.note{margin-top:26px;padding:18px 20px;border-left:3px solid var(--acc);background:var(--bg);border-radius:0 8px 8px 0;color:var(--muted);font-size:15.5px}
/* local band */
.local{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--sand);border-radius:12px;padding:34px 38px}
.local svg{width:56px;height:56px;stroke:var(--ink);fill:none;stroke-width:1.6}
.local h2{font-size:30px;margin:0 0 6px} .local p{margin:0;color:var(--muted)}
/* contact */
.contact{background:var(--ink);color:#fff;border-radius:14px;padding:56px;display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;position:relative;overflow:hidden}
.contact::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;border:2px solid color-mix(in srgb,var(--acc) 60%,transparent)}
.contact h2{color:#fff} .contact p{color:#C9D0D8;margin:0}
.contact .mail{font:500 15px var(--mono);color:#C9D0D8;display:block;margin-top:14px}
footer{padding:36px 0 50px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}
@media (max-width:900px){ nav{display:none} .grid{grid-template-columns:1fr 1fr} .feat,.feat.rev{grid-template-columns:1fr;gap:24px} .feat.rev .txt{order:0} }
@media (max-width:680px){ h1{font-size:40px} h2{font-size:32px} .grid,.pa,.two,.contact,.local{grid-template-columns:1fr} nav{display:none} .hero{padding-top:48px} .contact{padding:32px} header .btn{padding:8px 12px;font-size:14px} .flow .arr{padding:0 6px} }
/* ---- navigation ---- */
nav a{position:relative;padding:4px 0} nav a.on{color:var(--acc)} nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--acc);border-radius:2px}
.menu{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;width:40px;height:38px;cursor:pointer}
.menu span{display:block;width:18px;height:2px;background:var(--ink);margin:4px auto}
.drawer{display:none;position:fixed;top:64px;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(29,42,58,.12);padding:10px 24px 20px;z-index:6}
.drawer a{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.drawer.open{display:block}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--acc);width:0;z-index:7}
.totop{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;border:0;font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 8px 20px rgba(29,42,58,.25)}
.totop.show{opacity:1;pointer-events:auto}
.flow a{color:inherit;text-decoration:none} .flow li:hover{border-color:var(--acc)}
/* ---- pill row under hero ---- */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pills span{font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.pills span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}
/* ---- deliverable tabs ---- */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;padding:6px;background:var(--sand);border-radius:10px;width:fit-content;max-width:100%}
.tabs button{font:600 14px var(--ui);border:0;background:none;color:var(--muted);padding:9px 14px;border-radius:7px;cursor:pointer}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--panel);color:var(--ink);box-shadow:0 2px 6px rgba(29,42,58,.1)}
.pane{display:none;grid-template-columns:4fr 8fr;gap:40px;align-items:start}
.pane.on{display:grid;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane h3{font:700 28px/1.15 var(--cond);margin:0 0 10px} .pane p{color:var(--muted);margin:0 0 14px}
.pane ul{margin:0 0 18px;padding:0;list-style:none} .pane li{padding:7px 0 7px 24px;position:relative;border-bottom:1px solid var(--line);font-size:15.5px}
.pane li::before{content:"";position:absolute;left:2px;top:15px;width:11px;height:6px;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}
.chip{display:inline-block;font:500 12px var(--mono);color:var(--acc);background:var(--tint);border-radius:4px;padding:3px 8px;margin:0 6px 6px 0}
/* ---- standards table ---- */
.stdgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sc{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline}
.sc b{font:600 14px var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:4px 9px;grid-row:span 2;white-space:nowrap}
.sc h4{margin:0;font:600 17px var(--cond)} .sc p{margin:0;color:var(--muted);font-size:15px}
/* ---- feature list ---- */
.fgroups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fg{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px;border-top:3px solid var(--acc)}
.fg h3{font:600 19px var(--cond);margin:0 0 12px}
.fg ul{margin:0;padding:0;list-style:none} .fg li{padding:6px 0 6px 18px;position:relative;font-size:15px;color:var(--ink)}
.fg li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:2px;background:var(--acc);opacity:.7}
/* ---- faq ---- */
.faq{max-width:860px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:18px 30px 18px 0;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font:400 24px var(--ui);color:var(--acc);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--muted)}
/* ---- footer ---- */
footer.big{background:var(--ink);color:#AEB8C4;padding:56px 0 30px;margin-top:0}
footer.big .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
footer.big h5{color:#fff;font:600 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
footer.big a{color:#D5DBE2;text-decoration:none;display:block;padding:4px 0;font-size:15px} footer.big a:hover{color:#F3C9B8}
footer.big .wm{color:#fff} footer.big .brand{color:#fff;margin-bottom:12px}
footer.big .fine{border-top:1px solid #33445A;margin-top:40px;padding-top:20px;font-size:13px;display:block}
footer.big .fine p{margin:0 0 6px}
/* ---- legal pages ---- */
.legal{max-width:820px;padding:56px 24px 70px}
.legal h1{font-size:44px} .legal h2{font-size:24px;margin:36px 0 8px} .legal p,.legal li{color:#3A4757} .legal .upd{color:var(--muted);font-size:14px}
@media (max-width:900px){ .menu{display:block} header .wrap>.btn{display:none} .pane.on{grid-template-columns:1fr} .stdgrid{grid-template-columns:1fr} .fgroups{grid-template-columns:1fr 1fr} footer.big .cols{grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .fgroups{grid-template-columns:1fr} .sc{grid-template-columns:1fr} .sc b{grid-row:auto;width:fit-content} }