/* ===========================================================================
   thetaadvisory.ca — Direction A ("Statement"), Liquid Amethyst pass

   Palette unchanged: the exact Amethyst tokens from the approved Blink scheme.
   What changed in this pass is MATERIAL, not colour or structure — layered
   translucency, concentric radii, soft depth, spring motion.

   The one principle taken from iOS 27: glass belongs on CHROME, never behind
   body text. Apple shipped a translucency slider in 27 precisely because 26's
   glass hurt readability. So the sticky header and decorative surfaces are
   translucent; every surface carrying a paragraph is solid or near-solid.

   Signature: a single hairline theta wave drifting across the hero. The company
   is named after a brainwave; that is the one ambient flourish on the site and
   there is deliberately nothing else competing with it.

   Two traps, both of which fail SILENTLY — see README.md:
     1. Link colour lives on the bare `a` type selector so any class (.btn,
        .mark, .nav a) outranks it. Promote `a` to `.something a` and .btn-solid
        loses, giving you ink text on an ink fill — an invisible button.
     2. Poiret One has no U+0398. The wordmark's theta is inline SVG, not a
        typed character. It also has no U+2192, so arrows stay in Roboto.

   No JavaScript anywhere. Disclosures are native <details>, which is what lets
   the CSP set script-src 'none'.
   =========================================================================== */

@font-face{
  font-family:'Poiret One';
  src:url('/fonts/poiret-one-latin-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  /* Variable, wght 100–900 in one file. */
  font-family:'Roboto';
  src:url('/fonts/roboto-latin-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* ---- colour (unchanged) ---- */
  --ink:#302058;
  --ink-2:#4C3D71;
  --muted:#7A6E92;
  --faint:#A79CBC;
  --lav:#D0B9F1;
  --page:#F7F3FC;
  --card:#FFFFFF;
  --line:#E7E0F0;
  --line-2:#D3C8E6;
  --tint:#F0E8FB;
  --card-border:#DDD2EE;

  /* ---- material ---- */
  --glass-lav:rgba(211,190,242,.72);
  --glass-white:rgba(255,255,255,.72);
  --blur:saturate(170%) blur(20px);
  /* Two-layer depth: a tight contact shadow plus a wide soft one. A single
     large blur reads as a drop shadow; two layers read as a lifted surface. */
  --lift-1:0 1px 2px rgba(28,16,54,.05), 0 10px 28px -12px rgba(28,16,54,.14);
  --lift-2:0 2px 6px rgba(28,16,54,.07), 0 22px 48px -16px rgba(28,16,54,.20);

  /* ---- shape: concentric. Inner radius = outer − padding. ---- */
  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;
  --r-pill:999px;

  /* ---- motion: one spring curve, three durations ---- */
  --spring:cubic-bezier(.22,.94,.24,1.02);
  --t-fast:160ms var(--spring);
  --t-mid:280ms var(--spring);
  --t-slow:460ms var(--spring);

  --display:'Poiret One','Century Gothic','Futura',sans-serif;
  --body:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--card); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
h1,h2,h3{margin:0; font-weight:400; text-wrap:balance}
p{margin:0}
a{
  color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-2);
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:text-decoration-color var(--t-fast);
}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible,summary:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:var(--r-sm);
}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#EDE2FD;
  padding:10px 18px; z-index:20; text-decoration:none; border-radius:var(--r-pill);
}
.skip:focus{left:10px; top:10px}

.wrap{max-width:960px; margin:0 auto; padding:0 40px}
.label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:1.6px;
  color:var(--muted); font-weight:500;
}

/* ------------------------------- wordmark ------------------------------- */
.mark{
  font-family:var(--display); font-size:27px; letter-spacing:.5px; line-height:1;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.3em;
}
/* Oval, not square: the viewBox is 80x100 so the box must match, or the
   glyph letterboxes and drifts off the wordmark's optical baseline. */
.mark svg{width:.70em; height:.88em; flex:none; overflow:visible}
.mark:hover{text-decoration:none}

/* ------------------------- chrome: glass, sticky ------------------------- */
.head{
  position:sticky; top:0; z-index:10;
  padding:16px 0;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.head-in{display:flex; align-items:center; gap:26px}
.head--band{background:var(--glass-lav)}
.head--band .nav a{color:var(--ink)}
.head--doc{
  background:var(--glass-white);
  box-shadow:0 1px 0 rgba(48,32,88,.07);
}
/* Fallback: without backdrop-filter the header would be a see-through mess. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .head--band{background:var(--lav)}
  .head--doc{background:var(--card)}
}

/* nav links get the iOS control shape on interaction, nothing at rest */
.nav{display:flex; flex-wrap:wrap; gap:6px; font-size:13.5px; margin-left:auto}
.nav a{
  text-decoration:none; color:var(--ink-2);
  padding:6px 13px; border-radius:var(--r-pill);
  transition:background var(--t-fast), color var(--t-fast);
}
.nav a:hover{background:rgba(48,32,88,.07); color:var(--ink); text-decoration:none}
.nav a[aria-current]{
  background:rgba(48,32,88,.09); color:var(--ink); font-weight:500;
}

/* -------------------------------- buttons ------------------------------- */
.btn{
  display:inline-block; font-size:14px; font-weight:500; padding:11px 22px;
  border-radius:var(--r-pill); text-decoration:none; border:1px solid transparent;
  transition:background var(--t-fast), border-color var(--t-fast),
             color var(--t-fast), transform var(--t-fast), box-shadow var(--t-mid);
}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--ink); color:#EDE2FD; border-color:var(--ink); box-shadow:var(--lift-1)}
.btn-solid:hover{background:#3D2A6E; color:#fff; text-decoration:none; box-shadow:var(--lift-2)}
.btn-out{background:var(--glass-white); color:var(--ink); border-color:var(--line-2)}
.btn-out:hover{border-color:var(--ink); background:var(--card); text-decoration:none}
.acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
/* Support "Get started": each install button with its web fallback underneath. */
.get-app{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.get-app .web{font-size:13px; padding-left:22px}
#get-blink{scroll-margin-top:96px}  /* homepage "Get Blink" lands here, below the sticky header */
/* Transitional note under the marketplace buttons. Deletable in one line once the
   AppSource rename lands. Sits outside .acts so it cannot break the button row. */
.product .fineprint{margin-top:12px; font-size:13px; color:var(--muted)}

/* ================================ home ================================== */
.band{
  background:linear-gradient(176deg,#D9C8F6 0%,var(--lav) 52%,#C7ADEE 100%);
  padding:64px 0 76px;
}
.band h1{
  font-family:var(--display); font-size:48px; line-height:1.1;
  max-width:22ch; letter-spacing:.2px;
}
.band .where{margin-top:24px; font-size:17px; color:var(--ink); opacity:.72; max-width:44ch}

.body{padding:62px 0 0}
.lede{font-size:18.5px; line-height:1.68; color:var(--ink-2); max-width:62ch}

.caps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px}
.cap{
  border-top:1px solid var(--line-2); padding-top:18px;
  transition:border-color var(--t-mid);
}
.cap:hover{border-top-color:var(--ink)}
.cap h3{font-size:15px; font-weight:500; margin-bottom:8px}
.cap p{font-size:14px; color:var(--ink-2)}

/* The Blink panel: the one place glass is used behind content, so it sits at
   72% white over a pale tint — measured contrast on --ink-2 stays above 7:1. */
.product{
  position:relative; margin-top:62px; padding:38px 40px;
  display:grid; grid-template-columns:186px 1fr; gap:14px 40px; align-items:start;
  border-radius:var(--r-lg);
  /* The white overlay was washing --tint out almost completely, leaving a card
     that barely read against the white page. Slightly less white, plus the
     standard hairline, is enough to separate it. */
  background:
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.46)),
    var(--tint);
  border:1px solid var(--card-border);
  box-shadow:var(--lift-1), inset 0 1px 0 rgba(255,255,255,.85);
  transition:box-shadow var(--t-mid), transform var(--t-mid);
}
.product:hover{box-shadow:var(--lift-2)}
/* The lockup sits inside the heading with the product name beside it, visually
   hidden. An <h2> whose only content is an image is not a heading to a screen
   reader, and alt text alone leaves the section unlabelled in a heading list. */
.product h2{line-height:0; margin-top:6px; display:flex; align-items:center}
.product h2 img{width:180px}
.product-title span{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
}
.product-body{min-width:0}
.product p{color:var(--ink-2); max-width:64ch; font-size:15px}
.product p+p{margin-top:12px}

.contact{
  margin-top:62px; padding-top:32px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:26px 60px; align-items:baseline;
}
.contact .who{font-size:14px; color:var(--muted); max-width:46ch}
.contact .to{margin-top:10px; font-size:17px}

/* ============================== documents =============================== */
.doc-head{padding:52px 40px 36px; max-width:960px; margin:0 auto}
.doc-head h1{font-family:var(--display); font-size:44px; letter-spacing:.2px}
.doc-head .stand{margin-top:14px; font-size:16.5px; color:var(--ink-2); max-width:62ch}
.doc-head .updated{margin-top:18px; font-size:13px; color:var(--muted)}
.doc-head .product-eyebrow{display:block; margin-bottom:22px; line-height:0}
.doc-head .product-eyebrow img{width:112px}

.doc{display:grid; grid-template-columns:196px 1fr; gap:56px; padding-bottom:64px}
.rail{position:sticky; top:88px; align-self:start}
.rail ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:2px}
.rail a{
  font-size:13.5px; color:var(--ink-2); text-decoration:none; display:block;
  padding:7px 12px; border-radius:var(--r-pill);
  transition:background var(--t-fast), color var(--t-fast);
}
.rail a:hover{background:var(--tint); color:var(--ink); text-decoration:none}

.sec{margin-bottom:48px; scroll-margin-top:96px}
.sec>h2{font-size:20px; font-weight:500; margin-bottom:16px}
.sec h3{font-size:15px; font-weight:500; margin:24px 0 8px}
.sec p{color:var(--ink-2); max-width:68ch}
.sec p+p{margin-top:12px}
.sec ul{margin:14px 0 0; padding-left:22px; color:var(--ink-2); max-width:68ch}
.sec ul li{margin-bottom:8px}
.sec .fineprint{font-size:13.5px; color:var(--muted); margin-top:16px; max-width:68ch}

.steps{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px; counter-reset:s}
.steps li{counter-increment:s; padding-left:38px; position:relative; color:var(--ink-2); max-width:66ch}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--tint); color:var(--ink);
  font-size:12.5px; font-weight:500; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px var(--line-2);
}

/* iOS grouped list: one rounded container, hairlines between rows only. */
.group{
  margin-top:18px; border-radius:var(--r-lg); background:var(--card);
  box-shadow:var(--lift-1), inset 0 0 0 1px var(--line);
  overflow:hidden;
}
.group>.faq+.faq{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:17px 22px; font-size:15px; font-weight:500; color:var(--ink);
  list-style:none; display:flex; align-items:center; gap:16px;
  transition:background var(--t-fast);
}
.faq summary:hover{background:var(--page)}
.faq summary::-webkit-details-marker{display:none}
/* CSS chevron rather than +/− : rotates down→up, which is the iOS affordance */
.faq summary::after{
  content:''; margin-left:auto; flex:none;
  width:8px; height:8px;
  border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-mid), border-color var(--t-fast);
}
.faq summary:hover::after{border-color:var(--ink-2)}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq .a{
  padding:0 22px 19px; color:var(--ink-2); font-size:14.5px; max-width:68ch;
}
.faq .a p{margin-top:0}
.faq .a p+p{margin-top:10px}
.faq .a ul{margin-top:10px}
.faq[open] .a{animation:reveal var(--t-mid) both}
@keyframes reveal{from{opacity:0; transform:translateY(-5px)}}

.kbd{
  font-weight:500; color:var(--ink); background:var(--tint);
  border-radius:var(--r-sm); padding:2px 7px;
  box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:13px; white-space:nowrap;
}

.card-note{
  border-radius:var(--r-lg); padding:30px 32px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.4)),var(--tint);
  box-shadow:var(--lift-1), inset 0 1px 0 rgba(255,255,255,.8);
}
.card-note h2{font-size:20px; font-weight:500; margin-bottom:12px}
.card-note p{color:var(--ink-2); font-size:14.5px; max-width:64ch}
.card-note .rows{display:grid; gap:2px; margin-top:22px}
.card-note .row{
  display:flex; gap:16px; align-items:baseline; font-size:14.5px;
  padding:10px 14px; border-radius:var(--r-md); background:rgba(255,255,255,.6);
}
.card-note .row .k{
  width:96px; flex:none; color:var(--muted); font-size:12px;
  text-transform:uppercase; letter-spacing:1.2px;
}

/* sub-processor table: scrolls in its own box, page never scrolls sideways */
.tablebox{
  overflow-x:auto; margin-top:18px; border-radius:var(--r-lg);
  background:var(--card); box-shadow:var(--lift-1), inset 0 0 0 1px var(--line);
}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:520px}
th,td{text-align:left; padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:top}
th{
  font-size:10.5px; text-transform:uppercase; letter-spacing:1.3px;
  color:var(--muted); font-weight:500; background:var(--page);
}
tbody tr:last-child td{border-bottom:none}
td{color:var(--ink-2)}

/* ================================ footer ================================ */
.foot{border-top:1px solid var(--line); padding:30px 0 40px; margin-top:12px}
.foot-in{display:flex; flex-wrap:wrap; gap:14px 30px; align-items:baseline; font-size:12.5px; color:var(--muted)}
.foot-in .links{display:flex; flex-wrap:wrap; gap:6px; margin-left:auto}
.foot-in a{
  color:var(--ink-2); text-decoration:none;
  padding:5px 11px; border-radius:var(--r-pill);
  transition:background var(--t-fast), color var(--t-fast);
}
.foot-in a:hover{background:var(--tint); color:var(--ink); text-decoration:none}

/* =============================== 404 ==================================== */
.stub{padding:96px 0 120px}
.stub h1{font-family:var(--display); font-size:46px}
.stub p{margin-top:18px; color:var(--ink-2); max-width:52ch}

/* ==================== page-load sequence (one moment) ===================
   The hero settles, then the content below follows. Deliberately not applied
   to every element — a staggered cascade over the whole page is the thing that
   reads as machine-generated. */
@keyframes rise{from{opacity:0; transform:translateY(12px)}}
.band h1,.band .where,.lede,.doc-head h1,.doc-head .stand,.doc-head .product-eyebrow,.stub h1,.stub p{
  animation:rise var(--t-slow) both;
}
.band .where,.doc-head .stand,.stub p{animation-delay:70ms}
.lede{animation-delay:110ms}

/* ============================= responsive =============================== */

/* ============================== screenshots =============================
   Full listing slides, one per view, in a scroll-snap container. The strip is
   usable with no JavaScript at all -- assets/strip.js only adds the unattended
   advance, and yields to the reader the moment they touch it. */
.shots{margin-top:56px}
.shots-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.shots h2{font-size:20px; font-weight:500; letter-spacing:-.01em}
/* Manual controls. The strip has always been scrollable by hand, but only by
   dragging a scrollbar or swiping a trackpad -- neither discoverable, and both
   dependent on machine and browser. A button is neither. */
.shots-nav{display:flex; gap:8px; flex:none}
.shots-btn{
  width:32px; height:32px; padding:0; cursor:pointer;
  font:inherit; font-size:15px; line-height:1; color:var(--ink-2);
  background:var(--card); border:1px solid var(--card-border); border-radius:999px;
  box-shadow:var(--lift-1);
}
.shots-btn:hover{color:var(--ink); border-color:var(--line-2)}
.shots-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.shots-lede{margin-top:8px; max-width:56ch; font-size:14px; color:var(--ink-2)}

.strip{
  display:flex; gap:20px; margin-top:22px; padding:4px 0 18px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:4px}
.strip::-webkit-scrollbar-track{background:transparent}
.strip:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:4px}

/* Each slide is exactly one strip-width, so an advance lands on a slide edge
   and the snap has a single unambiguous target. */
.slide{flex:0 0 100%; margin:0; scroll-snap-align:start; scroll-snap-stop:always}
.slide img{
  display:block; width:100%; height:auto; aspect-ratio:1366/768;
  border-radius:12px; border:1px solid var(--card-border);
  box-shadow:var(--lift-1); background:var(--card);
}


/* Host row under the "What Blink looks like" heading, naming the three apps
   the slides below come from. Microsoft's own product icons, served from our
   own origin so no third party sees a request -- and referenced as <img>
   rather than inlined, because all three SVGs declare the same gradient ids
   ('a', 'b', ...). Inlined together those ids collide and the icons render in
   each other's colours; an <img> keeps each document isolated. */
.hosts{
  display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none;
  margin:14px 0 0; padding:0;
}
.hosts li{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--ink-2); white-space:nowrap;
}
.hosts img{width:20px; height:20px; flex:none; display:block}


@media (max-width:820px){
  .wrap,.doc-head{padding-left:22px; padding-right:22px}

  .mark{font-size:21px}
  .head{padding:12px 0}
  .band{padding:40px 0 52px}
  .band h1{font-size:33px}

  .doc-head{padding-top:34px}
  .doc-head h1{font-size:33px}
  .caps{grid-template-columns:1fr; gap:24px}
  .doc{grid-template-columns:1fr; gap:26px}
  .rail{position:static}
  .rail ul{display:flex; flex-wrap:wrap; gap:4px}
  .rail a{background:var(--tint)}
  .nav{gap:2px; font-size:12.5px}
  .nav a{padding:5px 10px}
  .product{padding:26px 22px; grid-template-columns:1fr; gap:18px}
  .product h2{margin-top:0}
  .product h2 img{width:150px}
  .card-note{padding:24px 22px}
  .head-in{flex-wrap:wrap; gap:12px}
  .faq summary,.faq .a{padding-left:18px; padding-right:18px}
}

/* Motion is decoration here, never information. All of it goes. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ================================ print =================================
   The legal pages get printed and attached to vendor questionnaires. */
@media print{
  .head,.nav,.rail,.skip{display:none}
  body{font-size:11pt; color:#000; background:#fff}
  .band{background:#fff; padding:0}
  .doc{grid-template-columns:1fr; gap:0}
  .doc-head,.wrap{max-width:none; padding:0}
  /* Best-effort: Chrome lets an author rule beat the UA's display:none on a
     closed <details>, so a printed support page shows every answer. Safari uses
     a shadow slot and ignores this — there, print with them expanded. */
  details:not([open])>*:not(summary){display:block !important}
  .faq summary::after{display:none}
  .group,.card-note,.product,.tablebox{box-shadow:none; background:#fff; border:1px solid #bbb}
  .faq,.sec,tr{break-inside:avoid}
  a{text-decoration:none; color:#000}
}