/* seostarterpros.com, the new designs: what all three share. The box model, the skip link and Reduce Motion (the
   system setting or the site kit's html[data-sk-motion="reduce"]). Each design's colors, faces and construction are
   in dN.css, written flat; build.py scopes them for the preview. Sizes are in rem so the kit's larger text scales
   everything. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
svg{display:block}
address{font-style:normal}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.skip{position:absolute;left:.75rem;top:-5rem;z-index:100;padding:.75rem 1rem;text-decoration:none;font-weight:600}
.skip:focus{top:.75rem}
.nb,a[href^="tel:"]{white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}
:root[data-sk-motion="reduce"] *,:root[data-sk-motion="reduce"] *::before,:root[data-sk-motion="reduce"] *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
/* touch targets on phones: the footer's phone and email links and a policy's own contents list reach 44 px */
@media (max-width:40rem){
  .foot address a,#contents+ul a,#contents+ol a{display:inline-flex;align-items:center;min-height:2.75rem}
}

/* Design 7, Pickup, in Chirp's colors (the founder's pick, November 9, 2026). A white product stage in Chirp's ink and
   a calm coral. Chirp's own bright orange is kept for the logo and Chirp himself; everything else orange is a pastel,
   and every orange fill that carries words is the deeper coral with white words, 4.76:1 (the founder's ask, Nov 9). The page is one example call: the console beside the copy rings, picks up, Chirp (the
   agent) lands on the phone line, each spoken word comes in like a live caption while the voice moves along the line,
   then the call turns into the START and STOP texts as the reader reaches the consent steps. d7.js plays it; with
   scripts off, or with Reduce Motion, the console shows the whole call and every text at once. */
@font-face{font-family:"PK Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/outfit-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"PK Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"PK Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/geist-mono-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"PK Fb";src:local("Arial"),local("Liberation Sans");size-adjust:100%;ascent-override:100%;descent-override:26%;line-gap-override:0%}
@keyframes d7-mark{from{background-size:0% .22em}to{background-size:100% .22em}}
@keyframes d7-up{from{opacity:0;transform:translateY(18px)}}
@keyframes d7-pop{from{transform:scale(.7)}}
@keyframes d7-dot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes d7-live{0%,100%{transform:scaleY(.25)}20%{transform:scaleY(1)}45%{transform:scaleY(.45)}70%{transform:scaleY(.85)}}
/* Chirp's sting, 2.0 s, from the logo study: the bird drops onto the wire, which dips; it squashes, settles with a tail
   flick, chirps twice and blinks */
@keyframes d7-perch{0%{transform:translateY(-330px);opacity:0;animation-timing-function:cubic-bezier(.55,0,.85,.4)}5%{opacity:1}30%{transform:translateY(0px);opacity:1}}
@keyframes d7-squash{0%{transform:scale(1,1)}30%{transform:scale(1,1);animation-timing-function:cubic-bezier(.2,.7,.3,1)}34%{transform:scale(1.07,.9);animation-timing-function:linear(0,.0207,.0738,.1478,.2335,.3243,.4151,.5023,.5836,.6575,.7232,.7806,.8299,.8714,.9059,.934,.9564,.9741,.9876,.9976,1.0048,1.0097,1.0128,1.0145,1.0151,1.015,1.0143,1.0132,1.012,1.0106,1.0092,1.0079,1.0066,1.0055,1.0044,1.0035,1)}50%{transform:scale(1,1)}}
@keyframes d7-dip{0%{transform:translateY(0px)}30%{transform:translateY(0px);animation-timing-function:cubic-bezier(.2,.7,.3,1)}34%{transform:translateY(12px);animation-timing-function:linear(0,.0207,.0738,.1478,.2335,.3243,.4151,.5023,.5836,.6575,.7232,.7806,.8299,.8714,.9059,.934,.9564,.9741,.9876,.9976,1.0048,1.0097,1.0128,1.0145,1.0151,1.015,1.0143,1.0132,1.012,1.0106,1.0092,1.0079,1.0066,1.0055,1.0044,1.0035,1)}52%{transform:translateY(0px)}}
@keyframes d7-tail{0%{transform:rotate(0deg)}30%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.3,1)}35%{transform:rotate(-16deg);animation-timing-function:linear(0,.0207,.0738,.1478,.2335,.3243,.4151,.5023,.5836,.6575,.7232,.7806,.8299,.8714,.9059,.934,.9564,.9741,.9876,.9976,1.0048,1.0097,1.0128,1.0145,1.0151,1.015,1.0143,1.0132,1.012,1.0106,1.0092,1.0079,1.0066,1.0055,1.0044,1.0035,1)}54%{transform:rotate(0deg)}}
@keyframes d7-beak{0%{transform:rotate(0deg)}58%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}62%{transform:rotate(24deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}67%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}72%{transform:rotate(24deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}77%{transform:rotate(0deg)}}
@keyframes d7-wink{0%{transform:scaleY(1)}88%{transform:scaleY(1);animation-timing-function:cubic-bezier(.45,0,.25,1)}91%{transform:scaleY(.1);animation-timing-function:cubic-bezier(.45,0,.25,1)}95%{transform:scaleY(1)}}
/* Chirp's states as the agent in the call: idle, listening, speaking, done */
@keyframes d7-blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.1)}}
@keyframes d7-flick{0%,80%,100%{transform:rotate(0deg)}86%{transform:rotate(-14deg)}}
@keyframes d7-hum{0%,100%{transform:translateY(0px)}50%{transform:translateY(3px)}}
@keyframes d7-chirp{0%,40%,100%{transform:rotate(0deg)}20%{transform:rotate(24deg)}62%{transform:rotate(18deg)}}

:root{
  --bg:#FFFFFF;--plate:#FAF7F5;--inset:#F4EFEC;--tint:#FFF1EC;--tint-edge:#FFD3C6;
  --hair:#ECE6E2;--hair2:#D8CFCA;--edge:#8C8189;
  --ink:#241338;--tx2:#4A3F5C;--lbl:#6B6178;--body:#2E2440;
  --brand:#FF5A3D;--pick:#B85540;--pick-ink:#FFFFFF;--pick-edge:#A84A36;--pick-tx:#A84A36;
  --pastel:#FFC6B8;--pastel-2:#F6A28C;
  --on-ink:#CFC6DB;--on-ink2:#B3A9C2;
  --display:"PK Display","PK Fb",Arial,sans-serif;--sans:"PK Sans","PK Fb",Arial,sans-serif;--mono:"PK Mono",ui-monospace,Menlo,Consolas,monospace;
  --spring:linear(0,.079,.249,.438,.61,.749,.852,.923,.969,.996,1.009,1.014,1.015,1.013,1.01,1.008,1);
  --soft:cubic-bezier(.22,1,.36,1);
  --win:0 1px 0 rgb(36 19 56/.04),0 12px 32px -10px rgb(36 19 56/.14),0 44px 88px -28px rgb(36 19 56/.2);
  --lift:0 1px 0 rgb(36 19 56/.03),0 8px 22px -12px rgb(36 19 56/.16);
  --top:4rem;
  --sk-accent:#B85540;--sk-accent-text:#FFFFFF;--sk-bg:#FFFFFF;--sk-text:#241338;--sk-line:rgb(36 19 56/.2);--sk-radius:14px;
  background:var(--bg);color:var(--ink);color-scheme:light;scroll-padding-top:calc(var(--top) + 2rem + var(--switch-h,0px))
}
body{position:relative;background:transparent;color:var(--ink);font:400 1.125rem/1.6 var(--sans);font-synthesis:none}
body::before{content:"";position:absolute;inset:0 0 auto;z-index:-1;height:58rem;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23E2D8D2'/%3E%3C/svg%3E") 0 0/24px 24px;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
::selection{background:var(--pastel);color:var(--ink)}
a{color:var(--pick-tx);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:.25rem}
.skip{background:var(--ink);color:#fff;border-radius:999px}
.wrap{max-width:79rem;margin:0 auto;padding:0 2rem}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0}

/* Chirp: the tile in the header plays the sting on load and again on hover (d7.js restarts it) */
.chirp .n-perch,.chirp .n-bird,.bird .n-perch,.bird .n-bird,.bird .n-scene{transform-box:view-box;transform-origin:254.7px 413px}
.chirp .n-scene{transform-box:view-box;transform-origin:280.6px 413px}
.chirp .n-tail,.bird .n-tail{transform-box:view-box;transform-origin:155.4px 320.2px}
.chirp .n-beakl,.bird .n-beakl{transform-box:view-box;transform-origin:369.1px 253.3px}
.chirp .n-eyes,.bird .n-eyes{transform-box:view-box;transform-origin:315.1px 214.4px}
.top .brand .chirp .n-perch{animation:d7-perch 2s linear calc(var(--t,0s) + .3s) both}
.top .brand .chirp .n-bird{animation:d7-squash 2s linear calc(var(--t,0s) + .3s) both}
.top .brand .chirp .n-scene{animation:d7-dip 2s linear calc(var(--t,0s) + .3s) both}
.top .brand .chirp .n-tail{animation:d7-tail 2s linear calc(var(--t,0s) + .3s) both}
.top .brand .chirp .n-beakl{animation:d7-beak 2s linear calc(var(--t,0s) + .3s) both}
.top .brand .chirp .n-eyes{animation:d7-wink 2s linear calc(var(--t,0s) + .3s) both}

/* Chirp alone on a white page: the bird in the tile's orange, its eye and feet in ink */
.bird{display:block;overflow:visible}
.bird .n-tail,.bird .n-tuft,.bird .n-bodyb,.bird .n-beaku,.bird .n-beakl{fill:var(--brand)}
.bird .n-feet,.bird .n-toes,.bird .n-eye{fill:var(--ink)}
.bird .n-glint{fill:#fff}
.bird .n-bird,.bird .n-eyes,.bird .n-beakl{transition:transform .6s var(--spring)}
.bird.s-idle .n-eyes,.bird.s-listen .n-eyes,.bird.s-speak .n-eyes{animation:d7-blink 4s ease-in-out infinite}
.bird.s-idle .n-tail{animation:d7-flick 3.4s ease-in-out infinite}
.bird.s-listen .n-bird{transform:rotate(-10deg)}
.bird.s-listen .n-scene{animation:d7-hum 1.6s ease-in-out infinite}
.bird.s-speak .n-beakl{animation:d7-chirp .9s ease-in-out infinite}
.bird.s-done .n-eyes{transform:scaleY(.15)}
.bird.s-done .n-bird{transform:scale(1.04)}

/* the header: a floating white pill */
.top{position:sticky;top:calc(var(--switch-h,0px) + .75rem);z-index:40;padding:0 1rem;margin-top:.75rem}
.top .wrap{position:relative;display:flex;align-items:center;gap:1rem;max-width:77rem;min-height:var(--top);padding:0 .5rem 0 .75rem;background:var(--bg);border:1px solid var(--hair);border-radius:999px;box-shadow:var(--lift);transition:box-shadow .35s ease}
/* once the page scrolls, the pill lifts off it */
.top.scrolled .wrap{box-shadow:0 1px 0 rgb(36 19 56/.04),0 18px 40px -16px rgb(36 19 56/.26)}
/* the reading line under the pill on a policy page: how far down the page the reader is */
.readbar{position:absolute;left:1.5rem;right:1.5rem;bottom:-1px;height:3px;border-radius:3px;overflow:hidden;pointer-events:none}
.readbar i{display:block;height:100%;border-radius:inherit;background:var(--pick);transform:scaleX(0);transform-origin:0 50%}
.brand{display:flex;align-items:center;gap:.625rem;color:var(--ink);text-decoration:none;font:600 1.1875rem/1 var(--display);letter-spacing:-.015em;white-space:nowrap;min-height:2.75rem}
.brand .mark{width:2.375rem;height:2.375rem;flex:none}
.brand .wm-c{color:var(--brand)}
.menu{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.menu a{position:relative;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1rem;border-radius:999px;color:var(--tx2);font:500 .9375rem/1 var(--sans);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.menu a::after{content:"";position:absolute;left:1rem;right:1rem;bottom:.55rem;height:3px;border-radius:999px;background:var(--pastel-2);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--spring)}
.menu a:hover{color:var(--ink)}
.menu a:hover::after{transform:scaleX(1)}
.menu a.go{background:var(--pick);color:var(--pick-ink);box-shadow:inset 0 0 0 1px var(--pick-edge)}
.menu a.go::after{display:none}

/* the page: copy on the left, the call console pinned on the right */
main{display:block}
:is(main,.arr)>section{padding:4.5rem 0}
:is(main,.arr)>section.hero{padding:5rem 0 3.5rem}
.hero h1{max-width:11em;font-size:clamp(2.625rem,1.4rem + 3.3vw,4rem);font-weight:650;line-height:1.02;letter-spacing:-.035em}
.hl{padding-bottom:.06em;background:linear-gradient(var(--pastel),var(--pastel)) no-repeat 0 92%/100% .22em;color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:d7-mark .8s cubic-bezier(.65,0,.35,1) calc(var(--t,0s) + .7s) both}
.lede{margin:1.5rem 0 0;max-width:31em;color:var(--tx2);font-size:1.25rem;line-height:1.6}
/* the hero comes in as one smooth rise: heading, words, then buttons */
.hero h1{animation:d7-up .9s var(--soft) calc(var(--t,0s) + .1s) both}
.hero .lede{animation:d7-up .9s var(--soft) calc(var(--t,0s) + .22s) both}
.hero .btns{animation:d7-up .9s var(--soft) calc(var(--t,0s) + .34s) both}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.btn{position:relative;display:inline-flex;align-items:center;gap:.625rem;min-height:3.5rem;padding:0 1.5rem;border-radius:999px;font:600 1.0625rem/1 var(--sans);text-decoration:none;white-space:nowrap;transition:transform .35s var(--spring),box-shadow .3s ease}
.btn svg{width:1.25rem;height:1.25rem;flex:none;transition:transform .35s var(--spring)}
.btn.primary{min-height:4rem;padding-left:.5rem;padding-right:1.75rem;background:var(--pick);color:var(--pick-ink);box-shadow:inset 0 0 0 1px var(--pick-edge);font-size:1.1875rem;font-weight:700}
.btn.primary svg{width:3rem;height:3rem;padding:.75rem;border-radius:50%;background:#fff;color:var(--pick);box-shadow:0 0 0 1px var(--pick-edge)}
.btn.primary::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 12px 28px -8px rgb(168 74 54/.45);opacity:0;transition:opacity .25s ease}
.btn.ghost{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge)}
.btn:hover{transform:translateY(-2px);color:inherit}
.btn.primary:hover{color:var(--pick-ink)}
.btn.primary:hover::after{opacity:1}
.btn.primary:hover svg{transform:rotate(-12deg)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.btn:active{transform:scale(.97);transition-duration:.12s}

/* the console: one white window. A call bar, the pane where the call plays, the example texts */
.scene{padding:0 0 3rem}
.thread{position:relative;margin:0;background:var(--bg);border:1px solid var(--hair);border-radius:1.5rem;box-shadow:var(--win)}
.cbar{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem .875rem 1.125rem;border-bottom:1px solid var(--hair)}
.av{flex:none;width:2.25rem;height:2.25rem}
.av circle:first-child{fill:#EEE9F3}
.av .fc{fill:var(--ink)}
.cwho{display:grid;gap:.125rem;min-width:0}
.cwho b{font:600 .9375rem/1.2 var(--sans)}
.cst{display:grid;color:var(--lbl);font:500 .75rem/1.3 var(--mono);letter-spacing:.02em}
.cst>span{grid-area:1/1;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .45s var(--soft)}
.cst .s2{opacity:1;transform:none}
:root.js .cst .s2{opacity:0;transform:translateY(4px)}
:root.js .thread[data-st="0"] .cst .s0,:root.js .thread[data-st="1"] .cst .s1,:root.js .thread[data-st="2"] .cst .s2,:root.js .thread[data-st="3"] .cst .s3,:root.js .thread.still .cst .s2{opacity:1;transform:none}
.cst .s0::before,.cst .s1::before{content:"";display:inline-block;width:.4375rem;height:.4375rem;margin-right:.375rem;border-radius:50%;background:var(--pastel-2);vertical-align:.05em}
.cst .s1::before{animation:d7-dot 1.6s ease-in-out infinite}
.cst .s0::before{background:var(--ink)}
.replay{display:inline-flex;align-items:center;min-height:2.75rem;box-sizing:border-box;margin-left:auto;padding:0 .875rem;border:1px solid var(--hair);border-radius:999px;color:var(--tx2);font:500 .75rem/1 var(--mono);letter-spacing:.04em;cursor:pointer;user-select:none;opacity:0;pointer-events:none;transition:opacity .4s ease,border-color .2s ease,color .2s ease}
.replay:hover{border-color:var(--edge);color:var(--ink)}
:root.ready .thread[data-done] .replay{opacity:1;pointer-events:auto}
.pane{display:grid;grid-template-columns:minmax(0,1fr);padding:1.375rem 1.25rem .75rem}
.ring,.line{display:none}
.talk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.ln{display:grid;gap:.3125rem;max-width:88%}
/* a caller's line is a soft bubble on the right; its words fill it left to right as they are said */
.ln.c{align-self:flex-end;justify-items:end}
.ln.c .said{padding:.5rem .875rem;border-radius:1.125rem 1.125rem .375rem 1.125rem;background:var(--inset)}
.sp{display:inline-flex;align-items:center;gap:.375rem;font:600 .6875rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--pick-tx)}
.sp::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--pastel-2)}
.ln.c .sp{color:var(--lbl)}
.ln.c .sp::before{background:var(--ink)}
.said{font:500 clamp(1.0625rem,.75rem + .55vw,1.3125rem)/1.45 var(--sans);color:var(--ink)}
.w{display:inline-block}
.head{display:flex;align-items:center;gap:.625rem;padding:1rem 1.25rem .75rem;border-top:1px solid var(--hair)}
.head .mark{width:1.875rem;height:1.875rem;flex:none}
.head b{display:block;font:600 .9375rem/1.2 var(--sans)}
.head span{display:block;color:var(--lbl);font:500 .75rem/1.3 var(--mono)}
.msgs{list-style:none;margin:0;padding:0 1.25rem 1.125rem;display:flex;flex-direction:column;gap:.625rem}
.msg{max-width:86%;padding:.625rem .875rem;border-radius:1.125rem;font-size:.9375rem;line-height:1.45}
.msg.you{align-self:flex-end;background:var(--pick);color:var(--pick-ink);border-bottom-right-radius:.375rem;font-weight:600}
.msg.biz{align-self:flex-start;background:var(--inset);color:var(--ink);border-bottom-left-radius:.375rem}
.thread figcaption{padding:.875rem 1.25rem 1rem;border-top:1px solid var(--hair);color:var(--lbl);font-size:.8125rem;line-height:1.5}
.chip{display:grid;margin:0 1.25rem 1.125rem;font:500 .75rem/1.3 var(--mono);color:var(--tx2)}
.chip>span{grid-area:1/1;display:inline-flex;align-items:center;gap:.5rem;justify-self:start;padding:.5rem .75rem;border-radius:999px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-edge)}
.chip>span i{width:.5rem;height:.5rem;border-radius:50%;background:var(--pastel-2)}
.chip .c-in{visibility:hidden}
.chip .c-out{background:var(--plate);box-shadow:inset 0 0 0 1px var(--hair2)}
.chip .c-out i{background:var(--edge)}

/* scripts on: the call bar on top, the call and the texts sharing one pane, the record tag hanging under the window.
   Every part keeps its place from the first frame, so nothing moves the window while the call plays. */
:root.js:not(.calm) .thread:not(.still){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto}
:root.js:not(.calm) .thread:not(.still) .cbar{grid-row:1;grid-column:1}
:root.js:not(.calm) .thread:not(.still) .pane{grid-row:2/5;grid-column:1;grid-template-rows:auto 1fr;padding-bottom:.5rem}
:root.js:not(.calm) .thread:not(.still) .head{grid-row:2;grid-column:1;border-top:0;padding-top:1.25rem;opacity:0}
:root.js:not(.calm) .thread:not(.still) .msgs{grid-row:3;grid-column:1;align-self:start}
:root.js:not(.calm) .thread:not(.still) figcaption{grid-row:4;grid-column:1;opacity:0}
:root.js:not(.calm) .thread:not(.still) .talk{grid-row:1;grid-column:1}
:root.js:not(.calm) .thread:not(.still) .ln .sp,:root.js:not(.calm) .thread:not(.still) .ln.c .said,:root.js:not(.calm) .thread:not(.still) .w,:root.js:not(.calm) .thread:not(.still) .msg{opacity:0}
:root.js:not(.calm) .thread:not(.still) .chip{position:absolute;left:1.25rem;top:calc(100% + .75rem);margin:0;opacity:0}
/* the incoming call, over the whole pane until the key is pressed */
:root.js:not(.calm) .thread:not(.still) .ring{grid-row:1/3;grid-column:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.875rem;padding:1rem 0}
.face{position:relative;display:grid;place-items:center;width:4.5rem;height:4.5rem}
.face .av{position:relative;width:4.5rem;height:4.5rem}
.halo{position:absolute;inset:-.875rem;border-radius:50%;background:var(--tint);opacity:.55;transform:scale(.92)}
.ring .lbl{color:var(--tx2);font:500 .8125rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.key{display:grid;place-items:center;width:4rem;height:4rem;margin-top:.5rem;border-radius:50%;background:var(--pick);box-shadow:inset 0 0 0 1px var(--pick-edge),0 12px 26px -10px rgb(168 74 54/.5)}
.key .hs{width:1.75rem;height:1.75rem;fill:var(--pick-ink)}
/* the phone line under the call: the voice moves along it, Chirp stands on its right end */
:root.js:not(.calm) .thread:not(.still) .line{grid-row:2;grid-column:1;align-self:end;display:block;position:relative;height:3.75rem;margin-top:1.25rem}
.wire{position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;border-radius:2px;background:var(--ink);transform-origin:0 50%}
.vs{position:absolute;left:0;right:4.75rem;top:0;bottom:0;display:flex;align-items:center;justify-content:space-between}
.vs i{flex:none;width:3px;height:100%;border-radius:999px;background:var(--pastel-2);transform:scaleY(0);transition:background-color .4s ease}
.thread[data-sp="c"] .vs i{background:var(--tx2)}
.line .bird{position:absolute;right:.375rem;bottom:calc(50% + 1px - 3.75rem * .037);width:3.75rem;height:3.75rem}

/* the stage of the call each section stands for */
.stage{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.125rem;padding:.4375rem .75rem .4375rem .625rem;border-radius:999px;background:var(--tint);color:var(--pick-tx);font:600 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.stage i{width:.375rem;height:.875rem;border-radius:999px;background:var(--pastel-2)}
:is(main,.arr)>section h2{font-size:clamp(1.875rem,1.3rem + 1.6vw,2.75rem);font-weight:640;line-height:1.1;letter-spacing:-.025em}
.intro{margin:.875rem 0 0;max-width:34em;color:var(--tx2);font-size:1.125rem}
/* each section rises in as it reaches the screen: its label (whose capsule then stands up), heading and line, then its
   cards, rows or steps one by one, each card's icon turning into place last. The footer's policies come in the same
   way. Start states hold only while scripts run (html.js, which boot.js takes off if the motion never starts), never
   for a calm visitor, and never under ?t= */
:where(:root.js:not([data-pose]):not(.calm)) :is(:is(main,.arr)>section:not(.hero):not(.scene),.pol):not(.in) :is(.wrap>.stage,.wrap>h2,.wrap>.intro,.card,.checks li,.contact li,.program,.pol-lede,.keys li,.more){opacity:0;transform:translateY(28px)}
:where(:root.js:not([data-pose]):not(.calm)) :is(:is(main,.arr)>section:not(.hero):not(.scene),.pol):not(.in) .stage i{transform:scaleY(0)}
:where(:root.js:not([data-pose]):not(.calm)) :is(:is(main,.arr)>section:not(.hero):not(.scene),.pol):not(.in) :is(.card .ic,.ki){opacity:0;transform:scale(.55) rotate(-12deg)}
:root.js :is(:is(main,.arr)>section,.pol) :is(.wrap>.stage,.wrap>h2,.wrap>.intro,.card,.checks li,.contact li,.program,.pol-lede,.keys li,.more){transition:opacity .7s ease var(--d,0s),transform .9s var(--soft) var(--d,0s)}
:root.js :is(:is(main,.arr)>section,.pol) .stage i{transition:transform .5s var(--spring) .35s}
:root.js :is(:is(main,.arr)>section,.pol) :is(.card .ic,.ki){transition:opacity .4s ease calc(var(--d,0s) + .3s),transform .7s var(--spring) calc(var(--d,0s) + .3s)}
:is(main,.arr)>section .wrap>h2,.pol h2{--d:.06s}
:is(main,.arr)>section .wrap>.intro,.pol-lede{--d:.12s}
:is(.card,.checks li,.contact li,.keys li):nth-child(1){--d:.18s}
:is(.card,.checks li,.contact li,.keys li):nth-child(2){--d:.27s}
:is(.card,.checks li,.contact li,.keys li):nth-child(3){--d:.36s}
:is(.card,.checks li,.contact li,.keys li):nth-child(4){--d:.45s}
.program{--d:.2s}
.more{--d:.5s}
.pol h2{transition:opacity .7s ease .06s,transform .9s var(--soft) .06s}
:where(:root.js:not([data-pose]):not(.calm)) .pol:not(.in) h2{opacity:0;transform:translateY(28px)}

/* what we set up: a 2 x 2 of white windows */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2.5rem 0 0;padding:0;list-style:none}
.card{padding:1.5rem 1.5rem 1.625rem;border:1px solid var(--hair);border-radius:1.25rem;background:var(--bg);box-shadow:var(--lift)}
:root.js :is(main,.arr)>section.in .card{transition:opacity .7s ease var(--d,0s),transform .9s var(--soft) var(--d,0s),box-shadow .3s ease}
:is(main,.arr)>section.in .card:hover,:root:not(.js) .card:hover{transform:translateY(-3px);box-shadow:var(--win);transition-delay:0s}
.card:first-child,.card:last-child{grid-column:1/-1}
.card:first-child{position:relative;padding-right:min(46%,20rem);background:var(--tint);border-color:var(--tint-edge)}
.card:first-child .ic{background:var(--pick);color:var(--pick-ink)}
.live{position:absolute;right:1.75rem;top:50%;display:flex;align-items:center;gap:5px;height:4.5rem;transform:translateY(-50%)}
.live i{width:7px;height:100%;border-radius:999px;background:var(--pastel-2);transform:scaleY(.25);animation:d7-live 1.6s ease-in-out infinite paused}
.live.on i{animation-play-state:running}
.live i:nth-child(3n){background:var(--ink)}
.live i:nth-child(2n){animation-duration:1.2s}.live i:nth-child(3n){animation-duration:1.9s}
.live .k1,.live .k7,.live .k13{animation-delay:-.3s}.live .k2,.live .k8,.live .k14{animation-delay:-.7s}.live .k3,.live .k9,.live .k15{animation-delay:-1.1s}
.live .k4,.live .k10,.live .k16{animation-delay:-.5s}.live .k5,.live .k11,.live .k17{animation-delay:-.9s}
:root:not(.ready) .live i,:root[data-pose] .live i{animation-play-state:paused}
.card .ic{display:grid;place-items:center;width:3rem;height:3rem;border-radius:.875rem;background:var(--tint);color:var(--pick-tx)}
.card .ic svg{width:1.5rem;height:1.5rem}
.card h3{margin-top:1.125rem;font-size:1.375rem;font-weight:620;line-height:1.25;letter-spacing:-.01em}
.card p{margin:.5rem 0 0;color:var(--tx2);font-size:1rem;line-height:1.6}

/* who it is for: ruled rows, each tick a capsule that tips over */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem;margin:2.25rem 0 0;padding:0;list-style:none}
.checks li{position:relative;display:flex;align-items:flex-start;gap:.875rem;padding:1.125rem 0;border-top:1px solid var(--hair);font-size:1.0625rem;line-height:1.5}
.checks li>svg{width:1.5rem;height:1.5rem;flex:none;margin-top:.0625rem;color:var(--pick-tx)}
.tip{position:absolute;left:0;top:1.1875rem;width:1.5rem;height:1.5rem;display:grid;place-items:center;pointer-events:none}
.tip i{width:.3125rem;height:.875rem;border-radius:999px;background:var(--pastel-2);opacity:0}
:root.js:not([data-pose]):not(.calm) .checks:not(.in) li>svg{opacity:0;transform:scale(.6)}
:root.js:not([data-pose]):not(.calm) .checks:not(.in) .tip i{opacity:1}
:root.js .checks li>svg{transition:opacity .25s ease calc(var(--k,0) * .12s + .75s),transform .4s var(--spring) calc(var(--k,0) * .12s + .75s)}
:root.js .checks .tip i{transition:transform .35s cubic-bezier(.65,0,.35,1) calc(var(--k,0) * .12s + .45s),opacity .2s ease calc(var(--k,0) * .12s + .75s)}
:root.js .checks.in .tip i{transform:rotate(-90deg)}
.checks li:nth-child(2){--k:1}.checks li:nth-child(3){--k:2}.checks li:nth-child(4){--k:3}

/* consent: four steps on a rail that fills orange one beat at a time */
.steps{margin:2.5rem 0 0;padding:0;list-style:none;display:grid}
.step{position:relative;padding:0 0 2rem 3.5rem}
.step:last-child{padding-bottom:0}
.step .n{position:absolute;left:0;top:-.125rem;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--hair2);color:var(--tx2);font:600 .875rem/1 var(--mono);transition:background .4s ease,color .4s ease,box-shadow .4s ease,transform .45s var(--spring)}
.step h3{font-size:1.25rem;font-weight:620;line-height:1.3;padding-top:.0625rem}
.step p{margin:.375rem 0 0;color:var(--tx2);font-size:1rem}
.node{position:absolute;left:1.0625rem;top:2.5rem;bottom:.375rem;width:2px;border-radius:2px;background:var(--hair)}
.node::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--pastel-2);transform:scaleY(0);transform-origin:50% 0;transition:transform .7s cubic-bezier(.65,0,.35,1) .15s}
.step:last-child .node{display:none}
.step.in .n,:root:not(.js) .step .n,:root[data-pose] .step .n{background:var(--pick);color:var(--pick-ink);box-shadow:inset 0 0 0 1px var(--pick-edge)}
.step.in .node::after,:root:not(.js) .node::after,:root[data-pose] .node::after{transform:scaleY(1)}
/* each step's number pops as it fills, and its words slide in beside it */
:root.js:not(.calm):not([data-pose]) .step.in .n{animation:d7-pop .55s var(--spring) both}
:root.js .step :is(h3,p){transition:opacity .6s ease .12s,transform .8s var(--soft) .12s}
:where(:root.js:not([data-pose]):not(.calm)) .step:not(.in) :is(h3,p){opacity:0;transform:translateX(-14px)}
.program{margin-top:3rem;padding:1.75rem 1.75rem 1.5rem;border:1px solid var(--hair);border-radius:1.25rem;background:var(--plate)}
.program h3{font-size:1.375rem;font-weight:640}
.program p{margin:.75rem 0 0;max-width:32em;font-size:1rem;color:var(--tx2)}
.program .join{color:var(--ink);font-weight:600}
.program .disc{padding:1rem 1.125rem;border:1px solid var(--hair);border-radius:.875rem;background:var(--bg);color:var(--body);font-size:1rem}
.program .btn{margin-top:.25rem}

/* contact: tall rows, mono key, display value */
.contact{margin:2.25rem 0 0;padding:0;list-style:none}
.contact li{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:baseline;gap:1rem;padding:1.375rem 0;border-top:1px solid var(--hair)}
.contact li:last-child{border-bottom:1px solid var(--hair)}
.contact .k{color:var(--lbl);font:600 .75rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.contact .v{font:600 clamp(1.375rem,1rem + 1.1vw,1.875rem)/1.25 var(--display);letter-spacing:-.015em;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;transition:color .2s ease}
.contact a.v{display:inline-block;padding-block:.5rem;margin-block:-.5rem}
.contact a.v:hover{color:var(--pick-tx)}
.contact address.v{font-size:clamp(1.125rem,.95rem + .6vw,1.375rem);line-height:1.4}

/* the call key on phones, lifted over the cookie bar while it shows */
.fab{position:fixed;right:1rem;bottom:calc(1rem + var(--sk-bar-h,0px));z-index:30;display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--pick);color:var(--pick-ink);box-shadow:inset 0 0 0 1px var(--pick-edge),0 12px 28px -10px rgb(120 50 35/.45);transition:transform .45s var(--spring),opacity .25s ease}
.fab svg{width:1.5rem;height:1.5rem}
:root.js .fab:not(.on){transform:translateY(5rem);opacity:0;pointer-events:none}

/* the footer: an ink band that opens on the policies, so a reviewer cannot miss them */
.foot{position:relative;margin-top:2.5rem;background:var(--ink);color:var(--on-ink);font-size:.9375rem}
.pol{padding:4.5rem 0 3rem}
.pol h2{color:#fff;font-size:clamp(1.875rem,1.3rem + 1.6vw,2.75rem);font-weight:640;line-height:1.1;letter-spacing:-.025em}
.pol-lede{margin:.875rem 0 0;max-width:36em;color:var(--on-ink);font-size:1.125rem;line-height:1.6}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2.25rem 0 0;padding:0;list-style:none}
.keys a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;height:100%;box-sizing:border-box;padding:1.375rem 1.25rem 1.375rem 1.375rem;border-radius:1.25rem;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 0 0 1px rgb(255 255 255/.1);transition:transform .35s var(--spring),box-shadow .3s ease}
.keys a:hover{transform:translateY(-3px);color:var(--ink);box-shadow:0 0 0 3px var(--pastel),0 18px 40px -16px rgb(0 0 0/.5)}
.keys a:focus-visible{outline:3px solid var(--pastel);outline-offset:3px;border-radius:1.25rem}
.ki{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:.9375rem;background:var(--tint-edge);color:var(--pick)}
.ki svg{width:1.625rem;height:1.625rem}
.kt b{display:block;font:640 1.3125rem/1.2 var(--display);letter-spacing:-.01em}
.kt span{display:block;margin-top:.3125rem;color:var(--tx2);font-size:.9375rem;line-height:1.45}
.ka{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--tint);color:var(--pick-tx);transition:transform .35s var(--spring),background .25s ease,color .25s ease}
.ka svg{width:1.25rem;height:1.25rem}
.keys a:hover .ka{transform:translateX(3px);background:var(--pick);color:var(--pick-ink)}
.more{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.more a,.more button{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1.125rem;border:1px solid rgb(255 255 255/.28);border-radius:999px;background:transparent;color:#fff;font:500 .9375rem/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.more a:hover,.more button:hover{background:rgb(255 255 255/.1);border-color:rgb(255 255 255/.6);color:#fff}
.more a:focus-visible,.more button:focus-visible{outline:2px solid var(--pastel);outline-offset:2px}
.base{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;padding-top:2.25rem;padding-bottom:2.75rem}
/* the rule over the company line, as wide as the cards above it */
.base::before{content:"";position:absolute;top:0;left:2rem;right:2rem;height:1px;background:rgb(255 255 255/.14)}
.foot .brand{color:#fff}
.foot .brand .mark{width:2.25rem;height:2.25rem}
.foot address{margin-top:1rem;font-style:normal;color:var(--on-ink);line-height:1.6}
.foot address p{margin:.125rem 0}
.foot address a{display:inline-block;padding-block:.625rem;margin-block:-.625rem;color:#fff;text-decoration:none}
.foot address a:hover{color:#fff;text-decoration:underline}
.foot .copy{margin:0;color:var(--on-ink2);font:500 .8125rem/1.5 var(--mono)}

/* the policy pages: a plate band behind the title, an orange capsule before each section */
/* the policy pages: one wide column (the founder asked for about twice the old 535 px; it is 960 px at 18 px type) under a
   compact title band, the title and its date line and nothing else */
.doc{position:relative;padding:2.25rem 0 5rem}
.doc .wrap{max-width:64rem}
.legal{color:var(--body);font-size:1.125rem;line-height:1.7}
.legal h1{font-size:clamp(1.875rem,1.4rem + 1.4vw,2.625rem);font-weight:650;line-height:1.1;letter-spacing:-.025em}
/* the title band: the h1 and its date line paint it edge to edge with a spread shadow, clipped at the date line's foot, so the band ends under the date whatever the title's length */
.legal h1{margin-bottom:0;padding-bottom:.625rem;background:var(--plate);box-shadow:0 0 0 100vmax var(--plate);clip-path:inset(-100vmax -100vmax -1px -100vmax)}
.legal h1+p{padding:0 0 1.5rem;background:var(--plate);box-shadow:0 0 0 100vmax var(--plate),0 1px 0 100vmax var(--hair);clip-path:inset(0 -100vmax -1px -100vmax)}
.legal h1+p{margin:0 0 2.25rem;max-width:none;color:var(--lbl);font:500 .8125rem/1.5 var(--mono)}
.legal h1+p strong{font-weight:600;color:var(--tx2)}
.legal h2{display:flex;align-items:baseline;gap:.625rem;margin:2.5rem 0 .75rem;font-size:1.5rem;font-weight:640;line-height:1.25;letter-spacing:-.015em}
.legal h2::before{content:"";flex:none;width:.375rem;height:1.125rem;border-radius:999px;background:var(--pastel-2);transform:translateY(.12em)}
.legal .hn{color:var(--pick-tx);font:600 1rem/1 var(--mono)}
.legal h3{margin:2rem 0 .5rem;font-size:1.1875rem;font-weight:620}
/* the contents list runs in columns, so the title band and the list fit high on the page */
#contents+ul{columns:2;column-gap:3rem;padding-left:1.25rem}
#contents+ul li{break-inside:avoid;margin:.25rem 0}
.legal ul,.legal ol{padding-left:1.25rem}
.legal li{margin:.375rem 0}
.legal li::marker{color:var(--pick-tx)}
.legal blockquote{margin:1.5rem 0;padding:1.125rem 1.25rem;border-radius:1rem;background:var(--plate);border:1px solid var(--hair)}
.legal blockquote p{margin:.25rem 0}
.legal table{width:100%;margin:1.5rem 0 2rem;border-collapse:separate;border-spacing:0;border:1px solid var(--hair);border-radius:1rem;overflow:hidden;font-size:.9375rem;line-height:1.5}
.legal th{padding:.75rem 1rem;background:var(--plate);border-bottom:1px solid var(--hair);text-align:left;vertical-align:bottom;color:var(--lbl);font:600 .6875rem/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.legal td{padding:.875rem 1rem;border-bottom:1px solid var(--hair);vertical-align:top}
.legal tr:last-child td{border-bottom:0}
.doc .legal{animation:d7-up .7s var(--soft) both}

/* 404: Chirp on an empty line, head cocked, listening */
.lost{padding:6rem 0 7rem;text-align:center}
.lost .wrap{max-width:40rem}
.lostline{position:relative;width:min(22rem,100%);height:6rem;margin:0 auto 2rem}
.lostline .wire{top:auto;bottom:.5rem}
.lostline .bird{position:absolute;left:50%;bottom:calc(.5rem + 2px - 5.5rem * .037);width:5.5rem;height:5.5rem;margin-left:-2.75rem}
.lost h1{font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem);font-weight:650;letter-spacing:-.03em}
.lost .lede{margin-inline:auto}
.lost .btn{margin-top:2rem}
.lost .btn.primary{padding:0 1.75rem}

/* pose (?t=) holds the opening; the rest of the page shows finished */
:root[data-pose] .top *,:root[data-pose] .hero *{animation-play-state:paused}

/* desktop: the console pinned beside the copy, from the hero down to the contact rows */
@media (min-width:70rem){
  main.home{display:grid;grid-template-columns:minmax(0,1fr) clamp(26rem,38vw,34rem);column-gap:4rem;max-width:80rem;margin:0 auto;padding:0 2rem;align-items:start}
  :is(main,.arr)>section{grid-column:1}
  :is(main,.arr)>section.scene{grid-column:2;grid-row:1/6;align-self:stretch;padding:4.5rem 0 5.5rem}
  :is(main,.arr)>section>.wrap{max-width:none;padding:0}
  .scene>.wrap{position:sticky;top:calc(var(--switch-h,0px) + var(--top) + 2.25rem)}
  .scene .thread{animation:d7-up 1s var(--soft) calc(var(--t,0s) + .2s) both}
  .fab{display:none}
}
/* tablets and phones: one column, the console after the hero */
@media (max-width:69.99rem){
  :is(main,.arr)>section>.wrap{max-width:46rem}
  .scene>.wrap{max-width:30rem}
}
@media (max-width:61.99rem){
  .keys{grid-template-columns:minmax(0,1fr);max-width:36rem}
}
@media (max-width:45rem){
  .wrap{padding:0 1.25rem}
  .top{padding:0 .625rem;top:calc(var(--switch-h,0px) + .5rem);margin-top:.5rem}
  .top .wrap{flex-wrap:wrap;gap:0;padding:.375rem .5rem;border-radius:1.5rem}
  .menu{width:100%;margin:0;justify-content:space-between;border-top:1px solid var(--hair)}
  .menu a{padding:0 .625rem;font-size:.875rem}
  .menu a::after{left:.625rem;right:.625rem}
  :is(main,.arr)>section{padding:4rem 0}
  :is(main,.arr)>section.hero{padding:3rem 0 2.5rem}
  .hero h1{max-width:none}
  .lede{font-size:1.125rem}
  .btns{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .btn.primary{justify-content:flex-start}
  :is(main,.arr)>section.scene{padding:0 0 1.5rem}
  .said{font-size:.9375rem}
  .ln{max-width:94%}
  .cards,.checks{grid-template-columns:minmax(0,1fr)}
  .card{padding:1.25rem}
  .card:first-child{padding:1.25rem 1.25rem 6rem}
  .live{top:auto;bottom:1.25rem;left:1.25rem;right:auto;height:3.25rem;transform:none}
  .contact li{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .program{padding:1.25rem}
  .pol{padding:3.5rem 0 2.5rem}
  .keys a{padding:1.125rem 1rem;gap:.875rem}
  .ki{width:2.75rem;height:2.75rem}
  .kt b{font-size:1.1875rem}
  .ka{width:2.25rem;height:2.25rem}
  .base{flex-direction:column;align-items:flex-start;padding-bottom:5.5rem}
  .legal{font-size:1.0625rem}
  .legal blockquote{margin:1.25rem -.25rem;padding:.875rem 1rem}
  .doc{padding-top:1.5rem}
  #contents+ul{columns:1}
  .readbar{left:1.25rem;right:1.25rem}
  .base::before{left:1.25rem;right:1.25rem}
  .legal table,.legal tbody,.legal tr,.legal td{display:block;width:100%}
  .legal table{border:0;border-radius:0;overflow:visible}
  .legal thead{display:none}
  .legal tr{padding:.875rem 0;border-bottom:1px solid var(--hair)}
  .legal td,.legal tr:last-child td{padding:.25rem 0;border:0}
  .legal td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;color:var(--lbl);font:600 .6875rem/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase}
}
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero .lede,.hero .btns,.hl,.scene .thread,.doc .legal,.top .brand .chirp *,.bird *,.live i,.cst .s1::before{animation:none!important}
  .bird .n-bird,.bird .n-eyes,.bird .n-beakl{transition:none}
}
:root.calm :is(.hero h1,.hero .lede,.hero .btns,.hl,.scene .thread,.doc .legal,.top .brand .chirp *,.bird *,.live i,.cst .s1::before){animation:none!important}