/* ===========================================================================
   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;

  /* ---- 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}

/* ================================ home ================================== */
.band{
  position:relative; overflow:hidden;
  background:linear-gradient(176deg,#D9C8F6 0%,var(--lav) 52%,#C7ADEE 100%);
  padding:64px 0 76px;
}
/* SIGNATURE — the theta wave. Two full cycles across a 1200px tile, starting
   and ending at the same phase so the drift loops seamlessly. Very low
   contrast on purpose: it should register as texture, not as a graphic. */
.band::after{
  content:''; position:absolute; left:0; right:0; bottom:-56px; height:160px;
  pointer-events:none; opacity:.18;
  background-repeat:repeat-x; background-size:1200px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='180' viewBox='0 0 1200 180'%3E%3Cpath d='M0 90 C100 40 200 40 300 90 S500 140 600 90 S800 40 900 90 S1100 140 1200 90' fill='none' stroke='%23302058' stroke-width='1.5'/%3E%3C/svg%3E");
  animation:drift 34s linear infinite;
}
@keyframes drift{to{background-position-x:-1200px}}

.band .wrap{position:relative; z-index:1}
.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);
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.62)),
    var(--tint);
  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)}
.product h2{line-height:0; margin-top:6px}
.product h2 img{width:180px}
.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 =============================== */
@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}
  .band::after{bottom:-46px; height:130px; background-size:820px 130px}
  @keyframes drift{to{background-position-x:-820px}}
  .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}
  .band::after{display:none}
  .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}
}