/* Taylee site system v8 — single shared stylesheet.
   Extracted verbatim from the approved index design in mockups/.
   All five pages link this one file; no page-level <style> blocks.
   Rules excluded per brief were not present in the source design. */
/* ============================================================
   TAYLEE  ·  site system v8
   FIELDS: blissful blue and patient purple only, strict alternation.
   TYPE:   black. WHITE: containers only.
   ACCENT: gentle green and rowdy red, small elements only.
   ============================================================ */
:root{
  --blue:#42CCFF; --purple:#E083F9; --green:#3DD180; --red:#F6201F;
  --chalk:#F5F5F5; --white:#FFFFFF; --black:#080605;   /* true ink, from the vector artwork: rgb(8,6,5) */
  --ease:cubic-bezier(.22,.68,.28,1);
  --display:'Nunito Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{font-family:var(--body);font-weight:300;letter-spacing:0;color:var(--black);
  line-height:1.62;background:var(--blue);-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.05em;
  line-height:1.04;font-feature-settings:'ss01' 1}
strong,b{font-weight:600}

/* ---------- the only two fields ---------- */
.band{padding:96px 40px;position:relative}
.band.blue{background:var(--blue)}
.band.purple{background:var(--purple)}
.inner{max-width:1180px;margin:0 auto}
.narrow{max-width:820px;margin:0 auto}

/* ---------- motion ----------
   Content is visible by default. It is hidden only once the site JS has put
   .js on the document element, i.e. only when something is guaranteed to be
   there to reveal it again. If the script never runs, nothing is ever hidden,
   whatever the height of the element. */
.rise{opacity:1;transform:none}
.js .rise{opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.08s}.rise.d2{transition-delay:.16s}
.rise.d3{transition-delay:.24s}.rise.d4{transition-delay:.32s}
.device-rise{opacity:1;transform:none}
.js .device-rise{opacity:0;transform:translateY(52px) scale(.975);
  transition:opacity .95s var(--ease),transform .95s var(--ease)}
.js .device-rise.in{opacity:1;transform:none}
.drift{will-change:transform}

/* ---------- nav: white container floating over the field ---------- */
.nav{position:fixed;top:14px;left:24px;right:24px;z-index:1000;background:var(--white);
  border-radius:100px;display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 10px 26px;box-shadow:0 6px 24px rgba(0,0,0,.10);
  transition:box-shadow .3s var(--ease)}
/* scroll state deepens the shadow only: no top, padding, height or
   transform change, so the bar never moves or resizes */
.nav.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.16)}
.nav-logo svg{height:34px;width:auto;display:block}
.nav-logo .fallback{font-family:var(--display);font-weight:800;font-size:23px;
  letter-spacing:-.05em;color:var(--black)}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-right a{color:var(--black);text-decoration:none;font-size:15px}
.nav-right a:hover{text-decoration:underline;text-underline-offset:4px}
.nav-cta{background:var(--blue);color:var(--black) !important;padding:12px 24px;
  border-radius:100px;font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  transition:transform .2s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);text-decoration:none !important}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--white);color:var(--black);padding:18px 34px;
  border-radius:100px;font-family:var(--display);font-weight:800;font-size:17px;
  letter-spacing:-.03em;text-decoration:none;transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:var(--black)}
.btn-sub{display:block;font-size:14px;margin-top:14px;opacity:.7}

/* ---------- masthead: identical on every page ---------- */
.masthead{padding:160px 40px 82px;text-align:center}
.mark{--T:64px;height:var(--T);width:auto;display:block;margin:0 auto var(--T)}
.masthead svg.mark{overflow:visible}
.masthead h1{font-size:clamp(38px,5vw,60px);margin-bottom:14px}
.masthead .meta{font-size:14px;opacity:.62;margin-top:12px}

/* ---------- split band: copy + device ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split.flip .copy{order:2}
.copy{max-width:520px}
.band h2{font-size:clamp(34px,4.2vw,54px);margin-bottom:18px}
.lede{font-size:21px;line-height:1.5}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;opacity:1}
.eyebrow::before{content:"";width:0;height:5px;border-radius:5px;background:var(--black);
  transition:width .7s var(--ease) .2s}
.rise.in .eyebrow::before{width:34px}
/* accent colours are not legible on a brand field (green/blue 1.06:1,
   red/purple 1.71:1), so every rule is ink. Green and red live on the
   card icon wells, where they sit on white and read properly. */
.device{display:flex;justify-content:center}
.device img{width:100%;max-width:330px;height:auto;display:block;
  filter:drop-shadow(0 26px 44px rgba(8,6,5,.22))}

/* ---------- white containers ---------- */
.panel-white{background:var(--white);border-radius:28px;padding:56px 52px}
.hero{padding-top:150px;text-align:left}
.hero h1{font-size:clamp(40px,5.2vw,68px);margin-bottom:18px}
.hero .lede{margin-bottom:30px}

/* ---------- card grid ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--white);border-radius:24px;padding:30px;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.14)}
.card .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:25px;margin-bottom:18px;background:var(--blue)}
.card.p .ic{background:var(--purple)} .card.g .ic{background:var(--green)} .card.r .ic{background:var(--red)}
.card h3{font-size:20px;margin-bottom:9px}
.card h4{font-size:17px;margin-bottom:7px}
.card p{font-size:15px;margin-bottom:14px}
.card p:last-child{margin-bottom:0}
.card .go{display:inline-flex;align-items:center;gap:7px;color:var(--black);
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;text-decoration:none;font-size:15px;
  border-bottom:3px solid var(--blue);padding-bottom:1px}
.card.p .go{border-bottom-color:var(--purple)} .card.g .go{border-bottom-color:var(--green)}
.card.r .go{border-bottom-color:var(--red)}
.card .go:hover{gap:12px}

/* ---------- section heading inside a band ---------- */
.band-head{text-align:center;margin-bottom:44px}
.band-head h2{margin-bottom:10px}
.band-head p{font-size:18px;opacity:.72}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.66;margin-bottom:14px}

/* ---------- document ---------- */
.doc h2{font-size:26px;margin:44px 0 16px;padding-top:26px;border-top:3px solid var(--blue)}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc h3{font-size:18px;margin:26px 0 10px}
.doc p{margin-bottom:15px} .doc ul,.doc ol{margin:0 0 16px 22px} .doc li{margin-bottom:7px}
.doc a{color:var(--black);text-decoration:underline;text-underline-offset:3px}
/* a table in auto layout cannot render narrower than its min-content width,
   so width:100% is not a promise it can keep: a table with enough columns
   pushes past the viewport, widens the layout viewport, and drags every
   position:fixed element out with it. The wrapper is the contract instead —
   the overflow is contained here and scrolls within itself, so the page
   cannot become wider than the screen whatever a table needs. */
.doc .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:22px 0;max-width:100%}
.doc .table-wrap table{margin:0}
.doc table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.doc th{background:var(--blue);padding:12px 16px;text-align:left;
  font-family:var(--display);font-weight:800;letter-spacing:-.03em}
.doc td{padding:12px 16px;border-bottom:1px solid var(--chalk)}
.callout{border-left:5px solid var(--blue);padding:18px 22px;margin:22px 0;background:var(--chalk);
  border-radius:0 14px 14px 0}
.callout.red{border-left-color:var(--red)} .callout.green{border-left-color:var(--green)}

/* ---------- faq ---------- */
.faq-list{background:var(--white);border-radius:24px;overflow:hidden}
.faq-item{border-bottom:2px solid var(--chalk)} .faq-item:last-child{border-bottom:0}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:800;letter-spacing:-.04em;font-size:17px;color:var(--black);
  padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q:hover{background:var(--chalk)}
.faq-q .chev{font-size:20px;transition:transform .3s var(--ease);flex-shrink:0}
.faq-item.open .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-item.open .faq-a{max-height:360px}
.faq-a div{padding:0 26px 22px}

/* ---------- closing + footer, both bands ---------- */
.closing{text-align:center}
.closing h2{font-size:clamp(32px,4vw,48px);margin-bottom:14px}
.closing p{font-size:20px;margin-bottom:30px;opacity:.78}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;flex-wrap:wrap}
.foot-logo svg{height:40px;width:auto;display:block}
.foot-links a{color:var(--black);text-decoration:none;font-size:14px;margin-right:22px;
  border-bottom:2px solid rgba(0,0,0,.24);padding-bottom:2px}
.foot-links a:hover{border-bottom-color:var(--black)}
.foot-social{display:flex;gap:16px}
.foot-social a{color:var(--black);display:inline-flex;font-size:25px;text-decoration:none;transition:transform .2s var(--ease)}
.foot-social a:hover{transform:translateY(-2px)}
.foot .legal{width:100%;border-top:2px solid rgba(0,0,0,.2);padding-top:22px;margin-top:26px;
  font-size:13px;opacity:.75;text-align:center;line-height:1.6}

@media (max-width:900px){
  .nav{left:12px;right:12px;padding:8px 8px 8px 18px}
  .nav-right a:not(.nav-cta){display:none}
  .nav-cta{padding:10px 18px;font-size:14px}
  .band{padding:64px 20px}
  .masthead{padding:118px 20px 56px} .mark{--T:52px}
  .hero{padding-top:110px}
  .split{grid-template-columns:1fr;gap:34px} .split.flip .copy{order:0}
  .copy{max-width:100%}
  .device img{max-width:268px}
  .panel-white{padding:36px 24px;border-radius:22px}
  .grid-2,.grid-4{grid-template-columns:1fr;gap:14px}
  .foot{justify-content:center;text-align:center} .foot .brandline{text-align:center}

}
@media (min-width:521px) and (max-width:900px){.grid-4{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rise,.device-rise,.js .rise,.js .device-rise{opacity:1 !important;transform:none !important}
  .eyebrow::before{width:26px !important}
}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--black);outline-offset:3px}

/* ---------- mobile menu ---------- */
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;
  width:46px;height:46px;background:none;border:0;cursor:pointer;padding:0;margin-left:8px;flex-shrink:0}
.burger span{display:block;width:24px;height:3px;border-radius:3px;background:var(--black);
  margin:3px 0;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.menu{display:none;position:fixed;inset:0;z-index:995;background:var(--white);
  flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:80px 24px 40px}
.menu.open{display:flex}
.menu a{font-family:var(--display);font-weight:800;letter-spacing:-.05em;font-size:30px;
  color:var(--black);text-decoration:none;padding:9px 0}
.menu .sep{width:52px;height:4px;border-radius:4px;background:var(--blue);margin:22px 0}
.menu .small{font-family:var(--body);font-weight:300;font-size:17px;letter-spacing:0}
.menu-social{display:flex;justify-content:center;gap:14px;margin-top:26px}
/* 44px minimum tap target, per WCAG 2.5.8 */
.menu .menu-social a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:50%;color:var(--black);
  box-shadow:inset 0 0 0 2px rgba(8,6,5,.28);transition:transform .2s var(--ease)}
.menu .menu-social a:hover{transform:translateY(-2px)}
.menu .menu-social svg{width:22px;height:22px}

@media (max-width:900px){
  .burger{display:flex}
}

/* ---------- footer: the brand line at scale, links as pills,
     and the mark walking off the bottom edge ---------- */
footer.band{padding-bottom:0;overflow:hidden}
.foot-wrap{position:relative;max-width:1180px;margin:0 auto}
.foot-line{margin:0 0 34px}
.foot-line img{width:min(340px,72vw);height:auto;display:block}
.foot-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
@media (min-width:901px){.foot-pills.main{flex-wrap:nowrap}}   /* page links + socials share one line on web */
.foot-pills a{display:inline-flex;align-items:center;gap:8px;background:var(--white);
  color:var(--black);text-decoration:none;font-size:15px;padding:11px 20px;border-radius:100px;
  transition:transform .22s var(--ease)}
.foot-pills a:hover{transform:translateY(-3px)}
.foot-pills a.ghost{background:transparent;box-shadow:inset 0 0 0 2px rgba(8,6,5,.28)}
.foot-pills a.ghost:hover{background:var(--white);box-shadow:none}
.foot-pills a svg{width:19px;height:19px}
.pill-pair{display:flex;gap:10px;flex-wrap:nowrap}   /* socials never split across lines */
/* mark placement per guidesheet: upright, never cropped, clear space T = mark height */
.foot-mark{--T:72px;display:flex;justify-content:center;padding:var(--T) 0}
.foot-mark svg{height:var(--T);width:auto;display:block}
.foot-meta{position:relative;margin-top:40px;padding:20px 0 0;text-align:center;margin-left:auto;margin-right:auto;
  border-top:2px solid rgba(8,6,5,.22);font-size:13px;opacity:.78;max-width:620px;line-height:1.6}

@media (max-width:900px){
  footer.band{padding-bottom:0}
  .foot-line{margin-bottom:22px;max-width:14ch}
  .foot-pills{max-width:100%}
  .foot-mark{--T:56px}
  .foot-meta{margin-top:30px;max-width:100%}
}