/* CySec - cysec.grcsac.com
   System fonts only. No external anything: the app promises no trackers and
   the site has to be able to say the same. Light and dark are both designed,
   not inverted. Crimson is identity; blue is action; red never carries alarm
   across the page, because the app is calm by design. */

:root{
  --serif:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --bg:#F7F5F2;               /* paper */
  --bg-alt:#EFEBE6;
  --ink:#1A1416;
  --ink-soft:#574C50;
  --line:#E0D9D2;
  --accent:#0B5ED7;           /* links and buttons, light */
  --accent-ink:#ffffff;
  --shield:#B4122F;           /* crimson darkened to hold AA on paper */
  --card:#ffffff;
  --shadow:0 1px 2px rgba(20,6,10,.05),0 8px 28px rgba(20,6,10,.06);
  --warn:#9A5407;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14060A;             /* near-black, a hint of red behind it */
    --bg-alt:#1E0C12;
    --ink:#F4EEEF;
    --ink-soft:#B3A5A9;
    --line:#341A22;
    --accent:#4DA3FF;
    --accent-ink:#06121F;
    --shield:#FF4A68;         /* crimson lifted to hold AA on near-black */
    --card:#1B0A10;
    --shadow:none;
    --warn:#E0A44A;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 20px}
a{color:var(--accent)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:9;background:var(--card);padding:10px 14px;border-radius:8px}

/* header ---------------------------------------------------------------- */
.nav{border-bottom:1px solid var(--line);background:var(--bg)}
.nav .wrap{display:flex;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600}
.brand img{width:28px;height:28px;border-radius:7px}
.nav nav{margin-left:auto;display:flex;gap:18px;font-size:15px}
.nav nav a{color:var(--ink-soft);text-decoration:none}
.nav nav a:hover{color:var(--ink);text-decoration:underline}

/* hero ------------------------------------------------------------------ */
.hero{padding:56px 0 8px;text-align:center}
.hero img.appicon{width:104px;height:104px;border-radius:24px;box-shadow:var(--shadow)}
.hero h1{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(30px,5.4vw,44px);line-height:1.18;margin:26px 0 14px;
  text-wrap:balance;
}
.hero .lede{font-size:clamp(17px,2.2vw,19.5px);color:var(--ink-soft);margin:0 auto;max-width:34em}
.platforms{margin-top:18px;font-size:14px;color:var(--ink-soft)}

/* buttons --------------------------------------------------------------- */
.cta-row{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;padding:.8rem 1.35rem;border-radius:12px;
  font-weight:600;font-size:16px;line-height:1;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);
}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.soon{background:transparent;color:var(--ink-soft);border:1px dashed var(--line);cursor:default}

/* sections -------------------------------------------------------------- */
section{padding:40px 0}
section + section{border-top:1px solid var(--line)}
h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(23px,3.2vw,30px);
  margin:0 0 6px;letter-spacing:-.005em;text-wrap:balance;
}
h2 + .sub{color:var(--ink-soft);margin:0 0 22px;font-size:16px}
h3{font-size:17px;margin:0 0 4px;font-weight:650}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}
.muted{color:var(--ink-soft)}
.small{font-size:14.5px}

/* steps ----------------------------------------------------------------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:18px}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.steps li::before{
  content:counter(s);
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg-alt);color:var(--ink-soft);
  font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;
}
.steps li > div{min-width:0}

/* tiers: the one place colour carries meaning ---------------------------- */
.tiers{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tier{
  background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--tc,var(--line));
  border-radius:10px;padding:14px 16px;
}
.tier .name{font-weight:650;font-size:16px}
.tier .says{color:var(--ink-soft);font-size:15px;margin-top:2px}
.tier .means{font-size:14.5px;margin-top:7px}
.t1{--tc:var(--shield)}
.t2{--tc:var(--warn)}
.t3{--tc:var(--accent)}
.t4{--tc:var(--ink-soft)}

/* feature pair ---------------------------------------------------------- */
.pair{display:grid;gap:22px}
@media (min-width:640px){.pair{grid-template-columns:1fr 1fr;gap:28px}}

/* promise list ---------------------------------------------------------- */
.promise{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.promise li{padding-left:26px;position:relative}
.promise li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:9px;height:9px;border-radius:50%;
  background:var(--shield);
}

/* pricing --------------------------------------------------------------- */
.price{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center}
.price .amt{font-family:var(--serif);font-size:clamp(26px,4vw,34px);margin:0 0 6px}
.price .amt span{font-size:16px;color:var(--ink-soft);font-family:var(--sans)}

/* documents (privacy / terms / support) --------------------------------- */
.doc{padding:34px 0 8px}
.doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(27px,4.4vw,36px);margin:0 0 6px}
.doc .dated{color:var(--ink-soft);font-size:14.5px;margin:0 0 24px}
.summary{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:0 0 28px;
}
.summary p{margin:0}
.summary .lbl{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:7px;font-weight:650;
}
.doc h2{font-size:clamp(20px,2.7vw,24px);margin:32px 0 8px}
.doc h3{margin:22px 0 4px}
.doc ul{margin:0 0 15px;padding-left:22px}
.doc li{margin-bottom:7px}
.tablewrap{overflow-x:auto;margin:18px 0}
.doc table{width:100%;border-collapse:collapse;font-size:15.5px}
.doc th,.doc td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font-weight:650}

/* faq ------------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:15px 0;font-weight:600;font-size:16.5px;
  list-style:none;display:flex;gap:12px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--ink-soft);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 16px;color:var(--ink-soft)}
.faq .a p{margin-bottom:11px}

/* screenshots -------------------------------------------------------------
   A horizontal strip that scrolls inside its own container, so the page body
   never scrolls sideways. Images are served at twice their display size for
   retina and no larger, which is what keeps the page under a second on a phone. */
.shots{
  display:flex;gap:20px;overflow-x:auto;padding:4px 20px 18px;margin:0 -20px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.shots figure{margin:0;flex:0 0 auto;width:240px;scroll-snap-align:start}
.shots figure.watch{width:200px}
.shots img{
  width:100%;height:auto;display:block;border-radius:18px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);
}
.shots figure.watch img{border-radius:22px;background:#000}
.shots figcaption{
  margin-top:11px;font-size:14px;line-height:1.5;color:var(--ink-soft);
}
.shots-note{margin-top:4px;font-size:14px;color:var(--ink-soft)}

/* footer ---------------------------------------------------------------- */
footer{border-top:1px solid var(--line);margin-top:20px;padding:26px 0 40px;background:var(--bg-alt)}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:14.5px;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
footer .sp{margin-left:auto}

/* 404 ------------------------------------------------------------------- */
.mid{text-align:center;padding:80px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}