/* Agentic Content Lab: the same person as his story page (enrique-hub/public/site.css).
   White paper, his blue (#61AEFA, #1C4E8E as the second ink), Fraunces for what he says,
   Hanken Grotesk for the body, DM Mono for small labels, glass for the bar, his pixel marks.
   Calm and still: nothing arrives one by one; the only movement is the ship on the Join button when you point at it. */
:root{
  --paper:#fff;--ink:#0A0D12;--ink-2:#3A4450;--ink-3:#5E6874;--wash:#F2F8FF;--wash-2:#D9EAFC;--line:#D8E2EC;
  --blue:#61AEFA;--mid:#2A7CCB;--deep:#1C4E8E;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;--sans:'Hanken Grotesk',Arial,Helvetica,sans-serif;--mono:'DM Mono',ui-monospace,Consolas,monospace;
  --col:600px;--wide:940px;--pad:clamp(22px,5vw,40px);--gap:clamp(76px,12vh,124px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink-2);font:400 clamp(18px,1.5vw,20px)/1.62 var(--sans);text-align:center;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit}
p,h1,h2,h3,ul,dl,dd,blockquote{margin:0}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:30;background:#fff;color:#0A0D12;padding:10px 14px;border:1.5px solid #0A0D12}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2.5px solid var(--deep);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
main{padding:0 var(--pad);overflow-x:hidden;overflow-x:clip}

/* the glass bar at the top */
.bar{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.52));-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(28,78,142,.08),0 14px 34px -16px rgba(28,78,142,.45)}
.bar a{display:inline-flex;align-items:center;gap:7px;min-height:46px;min-width:46px;justify-content:center;padding:9px 14px;border-radius:999px;font:500 14.5px/1 var(--sans);color:var(--ink);text-decoration:none;transition:background .2s}
.bar a:hover{background:rgba(28,78,142,.09)}
.bar-home svg{width:24px;fill:var(--deep);shape-rendering:crispEdges}
.bar .bar-join{background:linear-gradient(180deg,#7CBBFB,#4C9DF0);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.bar .bar-join:hover{background:linear-gradient(180deg,#6EB2F8,#3F92E8)}

/* the top */
.hello{position:relative;z-index:0;max-width:760px;margin:0 auto;padding-top:clamp(108px,15vh,148px)}
.hello::before{content:"";position:absolute;z-index:-1;left:50%;top:-20px;width:min(1120px,170vw);height:700px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(97,174,250,.19) 0%,rgba(97,174,250,.148) 20%,rgba(97,174,250,.103) 38%,rgba(97,174,250,.063) 55%,rgba(97,174,250,.031) 71%,rgba(97,174,250,.011) 86%,rgba(97,174,250,0) 100%)}
.ship{width:96px;height:auto;margin:0 auto clamp(20px,3.2vh,30px);fill:var(--deep);shape-rendering:crispEdges}
.ship.small{width:72px;margin-bottom:22px}
.kicker,.label{font:500 12px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mid)}
.kicker{margin-bottom:18px}
h1{font:600 clamp(36px,5.6vw,64px)/1.08 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.032em;color:var(--ink);text-wrap:balance}
.lede{max-width:540px;margin:clamp(18px,2.8vh,26px) auto 0;font:italic 400 clamp(21px,2.1vw,25px)/1.4 var(--serif);font-variation-settings:"SOFT" 0;letter-spacing:-.012em;color:var(--ink-2);text-wrap:balance}

/* the Join button: ink, glass-free, his hard blue shadow on hover, the ship lifts off */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:56px;margin-top:clamp(26px,4vh,36px);padding:16px 22px 16px 28px;background:var(--ink);color:#fff;font:600 18px/1 var(--sans);text-decoration:none;border-radius:999px;box-shadow:0 0 0 var(--blue);transition:transform .2s cubic-bezier(.2,.8,.2,1.4),box-shadow .2s}
.btn-ship{width:36px;fill:#fff;flex:none;transition:transform .55s cubic-bezier(.3,1.7,.4,1)}
.btn:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--blue)}
.btn:hover .btn-ship{transform:translate(4px,-13px) rotate(-8deg) scale(1.1)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--blue)}
.price{margin-top:12px;font:500 12.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* the parts */
.part{max-width:var(--col);margin:var(--gap) auto 0;scroll-margin-top:84px}
.part p{text-wrap:pretty}
.part p+p{margin-top:1.05em}
.part h2{margin:0 0 .7em;font:600 clamp(28px,3.7vw,40px)/1.14 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.028em;color:var(--ink);text-wrap:balance}
.label{margin-bottom:16px}

/* the problem */
.said{margin:1.1em 0!important;font:italic 400 clamp(34px,4.6vw,50px)/1.1 var(--serif);font-variation-settings:"SOFT" 0;letter-spacing:-.02em;color:var(--deep)}
.said+p{margin-top:0!important}

/* what you get */
.inside{max-width:var(--wide)}
.inside>h2{max-width:var(--col);margin-left:auto;margin-right:auto}
.get{max-width:var(--col);margin:clamp(40px,6vh,56px) auto 0;padding-top:clamp(36px,5.4vh,48px);background:radial-gradient(circle,var(--blue) 1.3px,transparent 1.7px) 50% 0/9px 4px repeat-x}
.inside>h2+.get{background:none;padding-top:0}
.get h3{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:.6em;font:600 clamp(23px,2.7vw,29px)/1.2 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.n{font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--mid)}
.crew{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 6px;margin:22px auto 26px;padding:0;max-width:700px}
.crew li{display:grid;justify-items:center;gap:8px;width:76px;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.crew svg{width:48px;height:40px;padding:0;fill:var(--deep);shape-rendering:crispEdges}
.more{display:inline-flex;align-items:center;gap:10px;min-height:46px;margin-top:20px;padding:4px 2px;font:500 12.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--deep);text-decoration:none}
.more:hover{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:5px}
.ic-nave{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--deep);flex:none}
.ic-nave svg{width:84%;height:auto;fill:#fff;shape-rendering:crispEdges}

/* how it's different */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(30px,4.6vh,40px);text-align:left}
.two div{padding:22px 22px 24px;border-radius:20px;background:var(--wash)}
.two dt{margin-bottom:8px;font:500 11.5px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--deep)}
.two dd{font-size:.94em;line-height:1.55;color:var(--ink-2)}

/* the note */
.note blockquote{font:400 clamp(18px,1.6vw,20.5px)/1.65 var(--sans);color:var(--ink-2)}
.note .why{margin-top:1.3em!important;font:italic 400 clamp(22px,2.3vw,27px)/1.35 var(--serif);color:var(--ink);text-wrap:balance}
.sig{margin-top:.9em;font:italic 400 clamp(21px,2.2vw,25px)/1.2 var(--serif);font-variation-settings:"SOFT" 0;color:var(--mid)}
.sig::before{content:"— "}

/* who it's for */
.asks{list-style:none;padding:0}
.asks li{padding:22px 0;font:600 clamp(20px,2vw,23px)/1.38 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.012em;color:var(--ink);text-wrap:balance;background:radial-gradient(circle,var(--line) 1.2px,transparent 1.6px) 50% 100%/9px 4px repeat-x}
.asks li:last-child{background:none}
.asks b{display:block;margin-bottom:8px;font:500 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}

/* levels of access */
.levels{max-width:var(--wide)}
.levels>h2{max-width:var(--col);margin-left:auto;margin-right:auto}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;margin-top:clamp(30px,4.6vh,42px);text-align:left}
.tier{display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:20px;background:var(--wash);border:1.5px solid transparent}
.tier.main{background:#fff;border-color:var(--ink);box-shadow:7px 7px 0 var(--blue)}
.tier-say{font:500 11.5px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mid)}
.tier h3{margin:10px 0 10px;font:600 25px/1.15 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.02em;color:var(--ink)}
.tier p:not([class]){font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.tier .tier-price{margin-top:16px;font:600 17px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.tier-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:auto;padding:12px 18px;border-radius:999px;font:600 15.5px/1 var(--sans);color:var(--ink);text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));border:1px solid rgba(28,78,142,.14);box-shadow:inset 0 1px 0 #fff,0 10px 22px -14px rgba(28,78,142,.5);transition:transform .2s}
.tier-go:hover{transform:translateY(-2px)}
.tier-go.solid{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
.tier>p:not([class]){margin-bottom:24px}
.tier .tier-price{margin:-8px 0 24px}

/* questions */
.faq{text-align:left}
.faq h2{text-align:center}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:16px 2px;cursor:pointer;list-style:none;font:600 18px/1.35 var(--sans);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--deep),var(--deep)) 50%/12px 2px no-repeat,linear-gradient(var(--deep),var(--deep)) 50%/2px 12px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 20px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.faq details a{display:inline-block;padding:11px 0;margin:-11px 0;color:var(--deep);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* the last call */
.last{padding-top:clamp(56px,8vh,80px);border-top:1px solid var(--line)}
.last h2{margin-bottom:.35em}

.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-top:var(--gap);padding:20px var(--pad) 28px;border-top:1px solid var(--line);font:400 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.foot a{display:inline-flex;min-width:46px;justify-content:center;align-items:center;min-height:46px;text-decoration:none}
.foot a[href^="mailto"]{text-transform:none;letter-spacing:.04em}
.foot a:hover{color:var(--ink)}

/* tablets and phones */
@media (max-width:860px){
  .tiers{grid-template-columns:1fr;max-width:var(--col);margin-left:auto;margin-right:auto}
  .tier.main{order:-1}
}
@media (max-width:640px){
  .hello{padding-top:100px}
  .hello::before{height:560px}
  .bar{top:10px}
  .bar a{font-size:13.5px;padding-left:11px;padding-right:11px;min-height:44px}
  .bar-home span{display:none}
  .ship{width:72px}
  h1{font-size:clamp(34px,9.4vw,44px)}
  .two{grid-template-columns:1fr}
  .crew{gap:14px 4px}
  .crew li{width:74px}
  .btn{font-size:17px;padding-left:24px}
}
@media (max-width:380px){
  .bar a{font-size:13px;padding-left:9px;padding-right:9px}
  .crew li{width:68px;font-size:9.5px}
}
@media (pointer:coarse){.bar a{min-height:46px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}