/* The product pages (AI co-pilot, Websites, Curriculum), on shared/paper.css.
 *
 * Same system as the homepage, a different job: a homepage sells the whole
 * thing in one pass, a product page takes one idea and walks through it. So
 * the pieces here are a page hero with a device beside it, feature rows that
 * alternate text and screen down the page, a browser frame, a reply card, a
 * swipeable rail and a prose column for the parts that are an argument rather
 * than a list.
 */

/* ---------- page hero ---------- */
.page-hero{position:relative;padding:176px 0 108px;overflow:clip}
.page-hero > .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:72px;align-items:center}
.page-hero .eyebrow{margin-bottom:24px}
.page-hero h1{max-width:12ch}
.page-hero .lede{margin:30px 0 38px;max-width:40ch}
.page-cta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.page-hero .note{margin-top:22px}
.page-hero-visual{position:relative}
@media (max-width:1024px){
  .page-hero{padding:132px 0 84px}
  .page-hero > .wrap{grid-template-columns:minmax(0,1fr);gap:60px}
  .page-hero h1{max-width:14ch}
}
.page-hero-copy > *{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.page-hero-copy .eyebrow{animation-delay:.06s}
.page-hero-copy h1{animation-delay:.14s}
.page-hero-copy .lede{animation-delay:.3s}
.page-hero-copy .page-cta{animation-delay:.44s}
.page-hero-copy .note{animation-delay:.56s}
.page-hero-visual{animation:heroIn 1.3s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(34px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- a section ---------- */
.band{background:var(--paper-2);border-top:1px solid var(--rule)}
.band-top{border-top:1px solid var(--rule)}
.sol-lede{margin-top:30px;font-size:17px;line-height:1.65;letter-spacing:-.008em;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.sol-lede strong{color:var(--ink);font-weight:500}

/* ---------- feature rows ----------
 * Text and screen side by side, the screen on alternate sides down the page,
 * every row opening on a hairline. The number is mono so it reads as an index
 * rather than as part of the headline. */
.features{margin-top:64px}
.feature{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:72px;align-items:center;padding:72px 0;border-top:1px solid var(--rule-2)}
.feature:last-child{padding-bottom:0}
.feature.flip{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.feature.flip > .feature-copy{order:2}
.feature-num{display:block;margin-bottom:20px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--ink-3)}
.feature h3{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.7vw,34px);line-height:1.1;letter-spacing:-.018em;margin-bottom:20px;text-wrap:balance}
.feature p{font-size:16.5px;line-height:1.68;letter-spacing:-.008em;color:var(--ink-2);max-width:48ch;margin-bottom:14px;text-wrap:pretty}
.feature p:last-child{margin-bottom:0}
.feature p strong{color:var(--ink);font-weight:500}
.feature-visual{position:relative}
@media (max-width:1024px){
  .feature{grid-template-columns:minmax(0,1fr);gap:40px;padding:56px 0}
  .feature.flip{grid-template-columns:minmax(0,1fr)}
  .feature.flip > .feature-copy{order:0}
}

/* ---------- a browser frame ----------
 * For a website, the frame is part of the claim: it says "this is a page on the
 * web", which a laptop lid does not. Light, one hairline, three quiet dots. */
.browser{background:var(--white);border:1px solid var(--rule-2);border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.45)}
.browser-bar{display:flex;gap:6px;align-items:center;height:24px;padding:0 11px;border-bottom:1px solid var(--rule);background:#faf9f6}
.browser-bar span{width:7px;height:7px;border-radius:50%;background:var(--rule-2)}
.browser img{width:100%}

/* ---------- a reply card: one captured answer from the co-pilot ---------- */
.reply{position:relative;border-radius:18px;overflow:hidden;background:var(--white);border:1px solid var(--rule);box-shadow:0 40px 80px -46px rgba(0,0,0,.45)}
.reply img{width:100%}

/* ---------- a swipeable rail of cards ----------
 * Scroll-snap does the physics, so a trackpad, a mouse wheel, a finger and
 * the two arrows all move it the same way. The rail is its own scroll
 * container, which is exactly why nothing INSIDE it carries a view()
 * animation: a view timeline in there would resolve against the rail and not
 * the page. The reveal goes on the rail itself. */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.rail-nav{display:flex;gap:10px;flex:none}
.rail-nav button{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--rule-3);background:transparent;color:var(--ink);cursor:pointer;font-size:15px;
  transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease,transform .12s ease;
}
.rail-nav button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--white)}
.rail-nav button:active:not(:disabled){transform:scale(.94)}
.rail-nav button:disabled{opacity:.35;cursor:default}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(372px,82vw);gap:20px;
  margin:44px calc(50% - 50vw) 0;padding:6px max(40px,calc(50vw - 600px)) 34px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(40px,calc(50vw - 600px));
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.rail-progress{height:1px;background:var(--rule);position:relative;margin-top:-10px}
.rail-progress i{position:absolute;left:0;top:0;height:1px;width:0;background:var(--accent);transition:width .25s ease}
@media (max-width:760px){
  .rail{padding-inline:22px;scroll-padding-inline:22px}
  /* beside the heading the arrows took a third of a phone's width from it */
  .rail-head{flex-direction:column;align-items:flex-start}
}

/* a job the co-pilot does: what it is called, what it does, then the real
   reply, whose top already carries the owner's ask in its own bubble */
.job{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:16px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.job:hover{transform:translateY(-4px);box-shadow:0 30px 60px -38px rgba(0,0,0,.4)}
.job-copy{padding:24px 24px 20px}
.job-kind{display:block;margin-bottom:10px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.job h3{font-family:var(--serif);font-weight:300;font-size:25px;line-height:1.12;letter-spacing:-.016em;margin-bottom:10px}
.job p{font-size:14.5px;line-height:1.55;letter-spacing:-.006em;color:var(--ink-2);text-wrap:pretty}
/* the reply, cropped to its top: the part that answers the ask */
.job-shot{margin-top:auto;border-top:1px solid var(--rule);height:340px;overflow:hidden;position:relative;background:var(--white)}
.job-shot img{width:100%}
.job-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(rgba(255,255,255,0),#fff)}

/* ---------- a fan of sites (Websites hero) ----------
 * Four real pages, fanned up and to the left from a front page on the right,
 * so each one behind shows its left edge, where every site keeps its logo. */
.fan{position:relative;height:clamp(300px,34vw,470px)}
.fan .browser{position:absolute;right:0;bottom:0;width:72%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fan .browser:nth-child(1){z-index:4}
.fan .browser:nth-child(2){z-index:3;transform:translate(-14%,-11%) scale(.95)}
.fan .browser:nth-child(3){z-index:2;transform:translate(-28%,-22%) scale(.9)}
.fan .browser:nth-child(4){z-index:1;transform:translate(-40%,-33%) scale(.85)}
.fan:hover .browser:nth-child(1){transform:translate(2%,3%)}
.fan:hover .browser:nth-child(2){transform:translate(-16%,-13%) scale(.95)}
.fan:hover .browser:nth-child(3){transform:translate(-32%,-26%) scale(.9)}
.fan:hover .browser:nth-child(4){transform:translate(-46%,-39%) scale(.85)}

/* ---------- a gallery of sites ---------- */
.site-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px;margin-top:60px}
.site-card{text-decoration:none;color:inherit;display:block}
.site-card .browser{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.site-card:hover .browser{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(0,0,0,.5)}
.site-card figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule)}
.site-card figcaption b{font-size:14.5px;font-weight:500;letter-spacing:-.01em}
.site-card figcaption span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);align-self:center}
.site-card:hover figcaption b{text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:1.5px;text-underline-offset:3px}
@media (max-width:1024px){ .site-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .site-grid{grid-template-columns:minmax(0,1fr)} }
.gallery-note{margin-top:44px;font-family:var(--serif);font-size:22px;font-weight:300;letter-spacing:-.014em;text-align:center}

/* ---------- a grid of facts: two or three across, each on a hairline ---------- */
.fact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;margin-top:56px}
.fact-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fact{padding:26px 0 30px;border-top:1px solid var(--rule-2)}
.fact b{display:block;font-family:var(--serif);font-size:23px;font-weight:300;letter-spacing:-.014em;line-height:1.15;margin-bottom:10px}
.fact p{font-size:14.5px;line-height:1.55;letter-spacing:-.006em;color:var(--ink-2);text-wrap:pretty}
@media (max-width:900px){ .fact-grid,.fact-grid.two{grid-template-columns:minmax(0,1fr)} }

/* ---------- wired: the app and the site, and what runs between them ---------- */
.wired{display:grid;grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);gap:28px;align-items:center;margin-top:64px}
.wired-label{display:block;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.wired-mid{display:grid;gap:34px}
.flow-arrow{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em;text-align:center}
.flow-arrow small{display:block;margin-top:4px;font-size:12.5px;font-weight:400;color:var(--ink-3);line-height:1.4}
.flow-arrow i{display:block;position:relative;height:1px;margin-top:12px;background:var(--rule-3)}
.flow-arrow i::after{content:"";position:absolute;right:-1px;top:-3.5px;border:4px solid transparent;border-left:6px solid var(--rule-3);border-right:0}
.flow-arrow.back i::after{right:auto;left:-1px;border-left:0;border-right:6px solid var(--rule-3)}
/* a dot of orange runs along each wire, one way each */
.flow-arrow i::before{content:"";position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:var(--accent);animation:wire 2.8s cubic-bezier(.5,0,.5,1) infinite}
.flow-arrow.back i::before{animation-name:wireBack;animation-delay:1.4s}
@keyframes wire{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 5px);opacity:0}}
@keyframes wireBack{0%{left:calc(100% - 5px);opacity:0}12%{opacity:1}88%{opacity:1}100%{left:0;opacity:0}}
.wired-cap{grid-column:1 / -1;margin-top:26px;text-align:center;font-family:var(--serif);font-size:22px;font-weight:300;letter-spacing:-.014em}
@media (max-width:1024px){
  .wired{grid-template-columns:minmax(0,1fr);gap:34px}
  .wired-mid{max-width:320px;margin:0 auto;width:100%}
}

/* ---------- prose: the parts that are an argument ---------- */
.prose{max-width:700px}
.prose .eyebrow{margin-bottom:22px}
.prose h2{margin-bottom:28px}
.prose p{font-size:17px;line-height:1.72;letter-spacing:-.008em;color:var(--ink-2);margin-bottom:18px;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:500}
.prose em{font-style:italic}
.prose .pull{margin:34px 0;padding-left:22px;border-left:1px solid var(--accent);font-family:var(--serif);font-size:24px;font-weight:300;line-height:1.3;letter-spacing:-.014em;color:var(--ink)}
.callout{margin:26px 0;padding:22px 24px;background:var(--white);border:1px solid var(--rule);border-radius:10px}
.callout .eyebrow{margin-bottom:10px;color:var(--ink)}
.callout p{font-size:15px;line-height:1.6;margin:0}
/* two columns of who owns what */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:36px 0 12px}
.cols .eyebrow{padding-bottom:12px;border-bottom:1px solid var(--rule-2);margin-bottom:6px;color:var(--ink)}
.cols ul{list-style:none;margin:0;padding:0}
.cols li{padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-2)}
.cols-cap{margin-top:18px;font-size:14.5px!important;color:var(--ink-3)!important}
@media (max-width:640px){ .cols{grid-template-columns:1fr;gap:28px} }

/* ---------- page by page ---------- */
/* a feature row used as a section's whole layout: no rule, no padding of its own */
.feature.plain{border-top:0;padding:0}
.feature.plain .sol-lede{margin-bottom:8px}
.feature.plain .steps-list{margin-top:32px}

/* AI: the captured reply stands in the hero, with the autopilot tag hung off
   its lower left corner so the two read as one object. Below the card, not
   on it: laid over the reply it hid the Cancel button, which is the point. */
.ai-hero-visual{max-width:420px;margin:0 auto;width:100%}
.ai-hero-card{border-radius:20px}
.ai-tag{
  position:absolute;left:-44px;bottom:-34px;z-index:2;max-width:236px;
  padding:14px 16px 15px 34px;background:var(--white);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.45);
}
.ai-tag::before{content:"";position:absolute;left:16px;top:20px;width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.6s ease-in-out infinite}
.ai-tag b{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.ai-tag span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--ink-2)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
@media (max-width:1024px){ .ai-tag{left:-12px} }
@media (max-width:600px){ .ai-tag{position:relative;left:auto;bottom:auto;margin:-40px 16px 0;max-width:none} }
.claims.guard,.claims.why{margin-top:56px;padding-top:34px;border-top:1px solid var(--rule-2)}

/* Websites */
.editor-row{margin-top:56px}
.editor-row .feature-visual{grid-column:1 / -1}
.editor-row.feature{grid-template-columns:minmax(0,1fr)}
.web-plans{margin-top:56px}
.plan .plan-sub strong{color:inherit;font-weight:600}
#offers .addons{margin-top:34px}
.own-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.own-grid .prose{max-width:none}
.own-grid .prose h2{font-size:clamp(28px,3vw,36px)}
@media (max-width:1024px){ .own-grid{grid-template-columns:minmax(0,1fr);gap:64px} }
.ladder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;margin-top:80px;padding-top:40px;border-top:1px solid var(--rule-2)}
.ladder-head .eyebrow{margin-bottom:16px;color:var(--ink)}
.ladder-head p{font-size:15px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.ladder-head strong{color:var(--ink);font-weight:500}
@media (max-width:1024px){ .ladder{grid-template-columns:minmax(0,1fr);gap:28px} }

/* Curriculum */
.cur-flow{margin-top:56px}
.report-facts{margin:8px 0 0;padding-bottom:72px}

/* ---------- motion ---------- */
.feature-visual .frame{perspective:1600px}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the screen drifts against its row for the whole crossing; the copy a
       little less, so the two pull apart as the row goes by */
    .feature-visual{animation:driftUp linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .feature-copy{animation:driftUpSmall linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .feature-visual > *{animation:tiltIn linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    .page-hero-visual > *{animation:heroDrift linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .page-hero-copy{animation:foldOut linear both;animation-timeline:scroll(root);animation-range:0 80vh}
    .fact{animation:liftIn linear both;animation-timeline:view();animation-range:entry 18% cover 42%}
    .fact:nth-child(3n+2){animation-range:entry 24% cover 48%}
    .fact:nth-child(3n){animation-range:entry 30% cover 54%}
    .site-card{animation:liftIn linear both;animation-timeline:view();animation-range:entry 12% cover 38%}
    .site-card:nth-child(3n+2){animation-range:entry 18% cover 44%}
    .site-card:nth-child(3n){animation-range:entry 24% cover 50%}
    .wired > div:first-child{animation:driftUp linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .wired > div:nth-child(3){animation:driftDown linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .prose .pull{animation:stepIn linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
    .cols li{animation:stepIn linear both;animation-timeline:view();animation-range:entry 20% cover 44%}
    /* these claims run to four lines, and a tall block reaches cover 44% late:
       it was still at .78 opacity with its top 200px from the top of the window */
    .claims.why .claim,.claims.guard .claim{animation-range:entry 8% cover 28%}
    .claims.why .claim:nth-child(2),.claims.guard .claim:nth-child(2){animation-range:entry 12% cover 32%}
    .claims.why .claim:nth-child(3),.claims.guard .claim:nth-child(3){animation-range:entry 16% cover 36%}
  }
}
@keyframes heroDrift{from{transform:none}to{transform:translateY(-70px)}}
@media (prefers-reduced-motion:reduce){
  .page-hero-copy > *,.page-hero-visual,.flow-arrow i::before,.ai-tag::before{animation:none}
  .fan .browser,.site-card .browser,.job,.rail-nav button,.rail-progress i{transition:none}
}