/* Landing page only. Sections hang their heading in a left margin, like a printed reference sheet; nothing floats, glows or rounds off. */
.page{max-width:70rem;margin:0 auto;padding:0 var(--gutter)}
.page{position:relative}
.home header.site .wrap{max-width:70rem}
.home nav a.pill{border:1.5px solid var(--text);padding:6px 14px;border-radius:var(--btn-radius)}
.home nav a.pill:hover{background:var(--text);color:var(--bg)}

/* ---- banner: GenoCanvas drawing a family, on a loop (demo.js); the title starts beneath it ---- */
/* The drawing uses the app's own colours, light and dark, so it looks like the app and not like this page. */
.demo{--banner-h:clamp(230px,40vw,640px);--bar-h:54px;position:relative;margin:0;
  --d-bg:#f7f8f8;--d-ink:#17252f;--d-paper:#fff;--d-muted:#566672;--d-accent:#0f6b6e;--d-soft:#dcecec;--d-panel2:#f3f5f6;
  --d-line:#dbe1e4;--d-line2:#c3ccd1;--d-field:#87939a;--d-minor:#eceff0;--d-major:#dde2e4;--d-shadow:rgba(16,32,42,.16)}
@media (prefers-color-scheme:dark){.demo{
  --d-bg:#131c20;--d-ink:#e7eef1;--d-paper:#1b262b;--d-muted:#9bacb5;--d-accent:#5cc4c6;--d-soft:#1a3a3d;--d-panel2:#1f2b31;
  --d-line:#29363d;--d-line2:#3a4b54;--d-field:#6b7d87;--d-minor:#192328;--d-major:#222f35;--d-shadow:rgba(0,0,0,.5)}}
.demo figure{margin:0}
.stage{position:relative;height:var(--banner-h);background:var(--d-bg);overflow:hidden;border-bottom:1px solid var(--rule)}
.scene{position:absolute;inset:0;width:100%;height:100%;overflow:visible;font-family:var(--sans)}
.scene .gm{fill:none;stroke:var(--d-minor)}
.scene .gM{fill:none;stroke:var(--d-major)}
.scene .sh{flood-color:var(--d-shadow)}
.scene .s{fill:var(--d-paper);stroke:var(--d-ink);stroke-width:1.8;stroke-linejoin:round}
.scene .s.k{stroke-width:1.5}
.scene .x{fill:none;stroke-linecap:round}
.scene .l path,.scene .kn{fill:none;stroke:var(--d-ink);stroke-width:1.9;stroke-linejoin:round}
.scene .l .emo,.scene .kn.emo{stroke-width:1.7;stroke-linecap:round}
.scene .n,.scene .y,.scene .a,.scene .ld,.scene .mkt{text-anchor:middle;paint-order:stroke;stroke-linejoin:round}
.scene .n{font-size:13px;font-weight:600;fill:var(--d-ink);stroke:var(--d-bg);stroke-width:3.5}
.scene .y{font-size:11.5px;fill:var(--d-muted);stroke:var(--d-bg);stroke-width:3.5}
.scene .a{font-size:16.8px;font-weight:600;fill:var(--d-ink);stroke:var(--d-paper);stroke-width:3}
.scene .ld{font-size:11px;fill:var(--d-muted);stroke:var(--d-bg);stroke-width:4}
.scene .mk{stroke:var(--d-paper);stroke-width:.9}
.scene .mkt{font-size:10.9px;font-weight:700;fill:#17212b;stroke:none}
.scene .kb{fill:var(--d-paper);stroke:var(--d-muted);stroke-opacity:.6;stroke-width:1.2}
.scene .kt{font-size:14px;font-weight:700;fill:var(--d-ink)}
.scene .kl{font-size:12.5px;fill:var(--d-ink)}
/* the app's menus, panels and pointer, drawn by demo.js */
.scene .card{fill:var(--d-paper);stroke:var(--d-line2)}
.scene .rule{stroke:var(--d-line)}
.scene .tx{fill:var(--d-ink);font-size:13.5px}
.scene .mu{fill:var(--d-muted);font-size:12px}
.scene .hd{fill:var(--d-ink);font:700 15px var(--serif)}
.scene .h2{fill:var(--d-ink);font:600 20px var(--serif)}
.scene .hl{fill:var(--d-panel2);stroke:var(--d-accent);stroke-width:2}
.scene .fld{fill:var(--d-paper);stroke:var(--d-field)}
.scene .box{fill:var(--d-paper);stroke:var(--d-field);stroke-width:1.2}
.scene .on{fill:var(--d-accent)}
.scene .tick{fill:none;stroke:var(--d-paper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scene .ring{fill:none;stroke:var(--d-accent);stroke-width:2}
.scene .glow{fill:none;stroke:var(--d-soft);stroke-width:4}
.scene .sel{fill:none;stroke:var(--d-accent);stroke-width:2}
.scene .dash{stroke-dasharray:6 4}
.scene .hdl{fill:var(--d-accent);stroke:var(--d-paper);stroke-width:1.5}
.scene .wh{fill:none;stroke:var(--d-paper);stroke-width:2;stroke-linecap:round}
.scene .tile{fill:var(--d-paper);stroke:var(--d-line)}
.scene .ico{fill:var(--d-bg)}
.scene .icon{fill:none;stroke:var(--d-ink);stroke-linecap:round;stroke-linejoin:round}
.scene .tl{fill:var(--d-ink);font-size:11.5px;text-anchor:middle}
.scene .press{fill:var(--d-soft);stroke:var(--d-accent);stroke-width:2}
.scene .toast{fill:var(--d-ink)}
.scene .toast-t{fill:var(--d-paper);font-size:13.5px}
.scene .kc{fill:var(--d-paper);stroke:var(--d-line2)}
.scene .kc-b{fill:var(--d-line2)}
.scene .kc-t{fill:var(--d-ink);font-size:13px;font-weight:650;text-anchor:middle}
.scene .ptr{fill:#fff;stroke:#17252f;stroke-width:1.2;stroke-linejoin:round}
/* one caption per step, stacked in one cell so the page under the banner keeps still as they change */
.demo figcaption{display:grid;max-width:70rem;margin:0 auto;padding:12px var(--gutter) 14px;font-size:.98rem;line-height:1.5}
.demo .cap{grid-area:1/1;margin:0;visibility:hidden}
.demo .cap.is-on{visibility:visible}
.demo figcaption strong{font-weight:700}
.demo figcaption .fig{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-right:6px}
.demo figcaption span.d{display:block;color:var(--text-muted);margin-top:2px;max-width:60rem}

/* player bar laid over the bottom edge of the banner */
.controls{position:absolute;left:0;right:0;top:calc(var(--banner-h) - var(--bar-h));height:var(--bar-h);background:rgba(10,31,33,.82);color:#e8f2f3}
.demo:not(.ready) .controls{display:none}
.controls-in{max-width:70rem;margin:0 auto;padding:0 var(--gutter);height:100%;display:flex;align-items:center;gap:0 22px}
.tabs{display:flex;flex-wrap:nowrap;gap:0 clamp(12px,2.2vw,28px);flex:1;min-width:0;height:100%}
.tab{position:relative;background:none;border:0;color:#a9c3c6;font:inherit;font-weight:600;font-size:.95rem;padding:0;cursor:pointer;white-space:nowrap}
.tab:hover{color:#fff}
.tab[aria-current=step]{color:#fff;font-weight:700}
/* the bar over each step fills as that step plays */
.tab::before,.tab::after{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.tab::before{background:rgba(255,255,255,.22)}
.tab::after{background:#fff;transform:scaleX(var(--p,0));transform-origin:left}
.ctls{display:flex;gap:0 18px}
.ctl{background:none;border:0;padding:10px 0;font:inherit;font-weight:600;font-size:.95rem;color:#9fe2e5;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.ctl:hover{color:#fff}
.controls :focus-visible{outline-color:#fff}
@media (max-width:700px){
  .demo{--bar-h:auto}
  .stage{height:auto;aspect-ratio:3/2}
  .controls{position:static;height:auto;padding:10px 0}
  .controls-in{flex-wrap:wrap;gap:6px 18px}
  .tabs{height:auto;flex-wrap:wrap;gap:6px 14px;padding-top:6px}
  .tab{padding-top:10px}
}

/* ---- title block, under the banner ---- */
.intro{padding-top:clamp(28px,4vw,52px);padding-bottom:clamp(4px,1vw,12px)}
.intro h1{font:700 clamp(1.7rem,3vw,2.5rem)/1.2 var(--sans);letter-spacing:-.01em;max-width:30ch;margin:0 0 .6em;text-wrap:balance}
.intro-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:8px clamp(24px,5vw,72px);align-items:start}
.intro .lead{font-size:1.12rem;line-height:1.6;max-width:36rem;margin:0}
.intro .actions{margin:0 0 .5em}
.intro .actions a:not(.btn){font-weight:650;white-space:nowrap}
.intro .fine{color:var(--text-muted);font-size:.93rem;max-width:26rem;margin:0}

/* ---- sections ---- */
/* The page is a small pedigree: each section is a person on one line down the margin, drawn with the symbols the app uses. */
.block{--pad:clamp(26px,3.4vw,42px);--node:22px;display:grid;grid-template-columns:11.5rem 64px minmax(0,1fr);gap:0 clamp(16px,2.6vw,36px);padding:var(--pad) 0}
.block>h2{grid-column:1;font-size:1.45rem;line-height:1.2;margin:0}
.block::before,.block::after{content:"";grid-column:2;grid-row:1;justify-self:center}
.block::before{align-self:stretch;width:2px;background:var(--rule-strong);margin:calc(var(--node) + 6px) 0 calc(var(--pad) * -2)}
.block:last-of-type::before{display:none}
.tree{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.tree .branch{fill:none;stroke:var(--rule-strong);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tree circle{fill:var(--accent)}
.block::after{position:relative;z-index:1;align-self:start;width:var(--node);height:var(--node);margin-top:4px;border:2.5px solid var(--text);background:var(--bg)}
.n-ci::after{border-radius:50%}
.n-di::after{transform:rotate(45deg) scale(.82);border-width:2.8px}
.n-idx::after{box-shadow:0 0 0 3px var(--bg),0 0 0 5.5px var(--text)}
.block>.body{grid-column:3;max-width:var(--measure);min-width:0}
.block>.body.wide{max-width:none}
.block .body>:first-child{margin-top:0}
.plain{margin:0 0 1em;padding-left:1.1em}
.plain li{margin-bottom:.45em;padding-left:.2em}
.facts th{width:9.5rem;padding-right:20px}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(16px,3vw,36px);margin-top:2.2em}
.keys h3{font:700 .95rem/1.3 var(--sans);letter-spacing:0;color:var(--text-muted);margin:0 0 6px}
.keys ul{list-style:none;margin:0;padding:0}
.keys li{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center;padding:5px 0;border-top:1px solid var(--rule);font-size:.97rem}
.keys li:last-child{border-bottom:1px solid var(--rule)}
.keys svg{width:54px;height:30px;display:block;overflow:visible}
.keys svg [fill="#ffffff"]{fill:var(--surface)}
.compare{margin-top:2.4em}
.compare td,.compare th[scope=row]{padding-right:18px}
.compare tbody th{width:28%}
.prices{border-top:1px solid var(--rule)}
.price{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;padding:20px 0;border-bottom:1px solid var(--rule)}
.price h3{margin-bottom:.15em}
.price p{margin:0 0 .6em;max-width:36rem}
.price .amt{font:600 3.2rem/1 var(--serif);letter-spacing:-.03em;text-align:right;font-variant-numeric:lining-nums}
.price.main{border-top:2px solid var(--text);padding-top:22px}
.price.main h3{font-size:1.5rem}
.price .act{grid-column:1/-1;margin:0}
.price label{display:block;font-weight:650;font-size:.95rem;margin:12px 0 5px}
.price input{width:100%;max-width:22rem;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--btn-radius);font:inherit;background:var(--surface);color:var(--text)}
.price #student-msg{min-height:1.4em;margin:6px 0 0;color:var(--danger);font-size:.95rem}
h3.sec{font-size:1.25rem;margin:1.8em 0 .3em}
.team td:last-child,.team th:last-child{text-align:right;width:1%;white-space:nowrap}
.team .btn{margin:0;padding:7px 16px}
.team td.num{font:600 1.15rem/1.4 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.qa dt{font:600 1.1rem/1.35 var(--serif);margin-top:1.3em}
.qa dt:first-child{margin-top:0}
.qa dd{margin:.25em 0 0}
.home footer{margin-top:0;border:0;background:var(--deep);color:#c4d6d8;padding:44px 0 56px}
.home footer .wrap{max-width:70rem}
.home footer a{color:#fff;text-decoration-color:#6b8d91}
.home footer a:hover{color:#bfe8ea}
@media (max-width:900px){
  .intro-cols{grid-template-columns:1fr}
  .block{grid-template-columns:1fr;gap:12px;border-top:1px solid var(--rule)}
  .block::before,.block::after{display:none}
  .block>.body{grid-column:1}
  .block>h2{font-size:1.35rem}
  .keys{grid-template-columns:1fr}
  .price{grid-template-columns:1fr}
  .price .amt{text-align:left;order:-1}
}
@media (max-width:560px){
  .facts th,.facts td,.compare th,.compare td{display:block;width:auto;padding-right:0;border-top:0}
  .facts tr,.compare tr{display:block;border-top:1px solid var(--rule);padding:8px 0}
  .compare thead{display:none}
  .compare td:nth-of-type(1)::before{content:"Free: ";font-weight:700}
  .compare td:nth-of-type(2)::before{content:"Full: ";font-weight:700}
}

/* the privacy figure */
.diagram{margin:1.2em 0 1.4em;max-width:42rem;color:var(--text)}
.diagram svg{display:block;width:100%;height:auto;overflow:visible}
.diagram text{fill:currentColor;font:650 15px var(--sans)}
.diagram text.sub{font-weight:400;font-size:12.5px;fill:var(--text-muted)}
.diagram figcaption{margin-top:6px;color:var(--text-muted);font-size:.96rem}