/* ═══════════════════════════════════════════════════════════════
   XTY — the front door at /xty/start/

   Sits on top of landing.css and only adds what the entrance needs:
   the art frames, the day strip, and the placeholder that shows an
   image brief until the real picture is dropped in.
   ═══════════════════════════════════════════════════════════════ */

.start-wrap{width:min(100% - 32px,1080px);margin:0 auto}

/* landing.css styles the pieces but leaves the page grid to whoever uses
   it, so the entrance brings its own two-column shape and body copy. */
.landing-section{margin-inline:auto}
.start-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.start-grid>*{min-width:0}
/* landing.css leaves the hero headline unsized, and the page font is large
   enough that Thai breaks mid-phrase without a ceiling. */
.start-grid h1{
  margin:12px 0 0;font-size:clamp(32px,4.4vw,56px);line-height:1.14;
  letter-spacing:-.025em;font-weight:800;text-wrap:balance;
}
.landing-section h2{
  margin:10px 0 0;font-size:clamp(26px,3.4vw,42px);line-height:1.18;
  letter-spacing:-.02em;font-weight:800;text-wrap:balance;
}
.start-grid .lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;margin-top:18px}
.start-wrap>.copy,.start-grid .copy{
  margin:16px 0 0;color:#62574F;font-size:16px;line-height:1.75;max-width:640px;
}
.landing-section .center-title{text-align:center}
@media(max-width:900px){
  .start-grid{grid-template-columns:1fr;gap:30px}
  /* On one column the picture reads better under the words that set it up.
     Centring makes the item shrink to its content, and a frame whose only
     width comes from an image at 100% has no content to shrink to — so the
     width has to be stated here or the frame collapses to nothing. */
  .start-grid>.hero-visual,.start-grid>figure{order:2;justify-self:center}
  .start-grid>figure.tb-art{width:min(460px,100%)}
}

/* ── Art frames ────────────────────────────────────────────────
   Every picture is a page torn out of a notebook, so the frame is
   paper rather than a card: soft edge, a little lift, no border. */
.tb-art{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#F6F1E2}
.tb-art>img{display:block;width:100%;height:auto}
.tb-art.page{aspect-ratio:var(--xty-card-aspect,63/88)}
.tb-art.page>img{height:100%;object-fit:cover}
.tb-art.scene{aspect-ratio:3/2}
.tb-art.scene>img{height:100%;object-fit:cover}
.tb-art figcaption{margin-top:10px;color:#6d7a6f;font-size:12px;line-height:1.6}

/* ── The image brief ───────────────────────────────────────────
   A picture that has not been drawn yet still has to hold its space,
   or the page reflows the day it arrives. The frame keeps the exact
   final box and shows the brief inside it, so dropping the file in
   is the whole change — no markup edit, no layout shift. */
.tb-art[data-pending] > img{display:none}
.tb-art[data-pending]::after{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(90,120,95,.16) 27px 28px),
    linear-gradient(180deg,#FBF7EC,#F3EEDD);
}
/* The brief is the fallback, not the picture. It only surfaces while the
   art is missing — once the file lands the frame shows the art instead. */
.tb-brief{display:none}
.tb-art[data-pending] .tb-brief{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:8px;
  padding:22px;overflow:auto;text-align:left;
}
.tb-art[data-pending] .tb-brief b{font-size:11px;letter-spacing:.14em;color:#7d8a72;text-transform:uppercase}
.tb-art[data-pending] .tb-brief .size{
  align-self:flex-start;padding:4px 9px;border-radius:999px;
  background:rgba(90,120,95,.12);color:#4a6b52;font:800 11px/1 var(--sans,inherit);
}
.tb-art[data-pending] .tb-brief p{margin:0;color:#55604f;font-size:12.5px;line-height:1.65}
.tb-art[data-pending] .tb-brief code{
  display:block;margin-top:auto;padding:8px 10px;border-radius:9px;
  background:rgba(255,255,255,.72);color:#6a7464;font-size:11px;word-break:break-all;
}

/* ── The day strip ─────────────────────────────────────────────
   Seven days of a book, drawn rather than described. No art needed:
   the shape of the week is the picture. */
.day-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:22px 0 10px}
.day-strip .d{
  display:grid;place-items:center;gap:5px;padding:11px 0;
  border:1px solid rgba(62,51,44,.12);border-radius:13px;background:#FFFEF8;
}
.day-strip .d small{color:#8b9384;font-size:10px;font-weight:800}
.day-strip .d i{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:12px;background:rgba(62,51,44,.07);color:#98a08f;
}
.day-strip .d.on i{background:var(--xty-green,#55B56A);color:#fff}
.day-strip .d.today{border-color:var(--xty-green,#55B56A);box-shadow:0 0 0 3px rgba(85,181,106,.14)}
.day-strip .d.rest i{background:rgba(62,51,44,.05);color:#c2c7ba}

/* ── Each person picks their own ───────────────────────────────
   The one thing that separates a book from a challenge app, so it
   gets a shape of its own rather than a bullet list. */
.own-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:20px}
.own{padding:15px;border:1px solid rgba(62,51,44,.11);border-radius:16px;background:#FFFEF8}
.own img{width:40px;height:40px;border-radius:11px;object-fit:cover;display:block}
.own b{display:block;margin:9px 0 3px;font-size:15px}
.own span{color:#6d7566;font-size:12.5px;line-height:1.6}

/* ── The line the whole product rests on ───────────────────────*/
.pull{
  max-width:620px;margin:30px auto 0;padding:26px 28px;
  border-left:4px solid var(--xty-green,#55B56A);border-radius:0 18px 18px 0;
  background:#FFFEF8;color:#4a5348;font-size:clamp(17px,2.1vw,22px);line-height:1.65;
  text-align:center;
}
.pull b{display:block;margin-top:10px;color:#2f6b43;font-weight:800}

/* A hint under the buttons carries more weight than a fourth button. */
.cta-hint{margin:12px 0 0;color:#7d8a72;font-size:13.5px;line-height:1.65}

/* ── Quiet close ───────────────────────────────────────────────*/
.start-cta{text-align:center;padding:74px 0 88px}
.start-cta h2{margin:0 0 14px;font-size:clamp(30px,5.4vw,50px);line-height:1.08;letter-spacing:-.03em}
.start-cta p{max-width:560px;margin:0 auto 26px;color:#62574F;font-size:16px;line-height:1.7}
.start-cta .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.start-note{margin-top:22px;color:#8b9384;font-size:12.5px;line-height:1.7}
.start-note+.start-note{margin-top:8px}
.start-note a{color:var(--xty-green,#2f7a4a);font-weight:800}

@media(max-width:620px){
  .day-strip{grid-template-columns:repeat(7,1fr);gap:4px}
  .day-strip .d{padding:8px 0;border-radius:10px}
  .day-strip .d small{font-size:9px}
  .tb-art[data-pending] .tb-brief{padding:16px}
}