/* Focused pages and concrete examples, layered over the existing component styles. */
:root { --ink:#25282c; --muted:#60666c; --sea:#50585f; --line:#dfe3e5; --wash:#f5f6f6; --deep:#292d32; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.ui-icon { width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.header { min-height:6.5rem; }
.header #page-tabs { gap:.4rem; }
#page-tabs a { display:inline-flex; align-items:center; justify-content:center; gap:.8rem; min-height:2.9rem; padding:.6rem 1.05rem; border:1px solid transparent; color:var(--muted); font-size:.875rem; }
#page-tabs a:hover { color:var(--ink); background:var(--wash); }
#page-tabs a[aria-selected="true"] { color:var(--ink); border-color:var(--line); background:var(--wash); }
#page-tabs .book-tab { margin-left:.7rem; background:var(--ink); color:white; }
#page-tabs .book-tab:hover,#page-tabs .book-tab[aria-selected="true"] { background:#3b4249; color:white; border-color:#3b4249; }
.page-panel { padding-bottom:2rem; }
.page-panel:focus { outline:none; }
.page-panel:focus-visible { outline:3px solid #737b85; outline-offset:8px; }
.hero { padding:3.5rem 0 3rem; }
.hero h1 { font-size:clamp(3.3rem,5vw,5.1rem); }.hero h1 em { white-space:normal; }
.hero-quote { margin-top:1.8rem; padding:.2rem 0 .2rem 1rem; border-left:2px solid #c8cfd3; }
.hero-quote > p { color:var(--ink); font-family:Georgia,serif; font-size:1.3rem; line-height:1.35; }
.hero-quote cite { display:block; margin-top:.45rem; color:var(--muted); font-size:.7rem; font-style:normal; }.hero-quote a:hover { text-decoration:underline; text-underline-offset:3px; }
.project-walkthrough { padding:3rem 0; border-top:1px solid var(--line); }
.project-walkthrough-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:4rem; margin-bottom:2rem; }
.project-walkthrough-heading h2 { margin-top:.7rem; font-size:clamp(2.4rem,3.6vw,3.4rem); }.project-walkthrough-heading > p { max-width:31rem; color:var(--muted); font-size:.95rem; }
.official-walkthrough { margin-top:1rem; border:1px solid var(--line); border-radius:.45rem; }
.official-walkthrough summary { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.2rem; color:var(--ink); font-size:.85rem; cursor:pointer; list-style:none; }.official-walkthrough summary::-webkit-details-marker { display:none; }.official-walkthrough summary small { display:inline-block; margin-left:.7rem; color:var(--muted); font-size:.7rem; }
.official-video-frame { aspect-ratio:16/9; background:#f5f6f6; }.official-video-frame iframe { display:block; width:100%; height:100%; border:0; }
.official-walkthrough > p { padding:.8rem 1.2rem; color:var(--muted); font-size:.72rem; }.official-walkthrough a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.no-js .official-video-frame { display:none; }
.coast-photo img { aspect-ratio:1.1; }
.familiar-map { display:grid; grid-template-columns:.8fr 1.2fr; gap:4rem; align-items:center; padding:3.5rem 0 2rem; }
.map-copy h2 { margin-top:.65rem; font-size:clamp(2.1rem,3vw,2.9rem); }
.map-copy > p:not(.eyebrow) { max-width:24rem; margin:1rem 0; color:var(--muted); }
.interaction-map { padding:1.8rem 1rem; }
.map-center { display:flex; align-items:center; justify-content:center; gap:.6rem; width:fit-content; margin:0 auto 2.3rem; position:relative; }
.map-center img { width:3.3rem; height:3.3rem; }
.map-center span { font-size:.9rem; font-weight:600; }
.map-center::after { content:''; position:absolute; top:100%; left:50%; height:1.1rem; border-left:1px solid #b8c0c5; }
.map-branches { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:relative; gap:1rem; }
.map-branches::before { content:''; position:absolute; left:16.7%; right:16.7%; top:-1.2rem; border-top:1px solid #b8c0c5; }
.map-branches a { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem; }
.map-branches a::before { content:''; position:absolute; top:-1.2rem; height:1.2rem; border-left:1px solid #b8c0c5; }
.map-icon { display:grid; place-items:center; width:3.3rem; height:3.3rem; margin-bottom:.3rem; border:1px solid var(--line); background:var(--wash); border-radius:.65rem; }
.map-branches a:hover .map-icon { border-color:#7f8992; background:#e9edef; }
.map-branches strong { font-size:.85rem; font-weight:600; }
.map-branches small { max-width:9rem; color:var(--muted); font-size:.75rem; line-height:1.45; }
.page-heading { padding:3.5rem 0 2.5rem; max-width:53rem; }
.page-heading h1 { font-size:clamp(2.9rem,4.6vw,4.5rem); margin-top:1rem; line-height:1.12; }
.page-heading h1 em { white-space:normal; }
.page-heading > p:last-child { max-width:42rem; margin-top:1.3rem; color:var(--muted); font-size:1.05rem; }
.example-scene { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center; gap:clamp(2rem,5vw,5rem); padding:3rem 0 4rem; border-top:1px solid var(--line); scroll-margin-top:2rem; }
.email-scene { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); }
.scene-number { font-size:.72rem; font-weight:700; letter-spacing:.1em; color:var(--muted); }
.scene-copy h2 { margin-top:1.1rem; font-size:clamp(2.5rem,3.6vw,3.5rem); }
.scene-copy > p { max-width:27rem; margin-top:1.4rem; color:var(--muted); }
.scene-copy .try-prompt { padding-left:1rem; border-left:2px solid #c5cbd0; color:var(--ink); font-size:1rem; }
.scene-note { display:block; margin-top:1.5rem; color:var(--muted); font-size:.78rem; }
.scene-visual { min-width:0; }
.scene-visual figcaption { margin-top:1rem; color:var(--muted); text-align:center; font-size:.75rem; line-height:1.5; }
.phone-scene { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; padding:2.5rem 1.5rem 1.5rem; background:#fff; }
.phone-shell { width:18.9rem; max-width:100%; padding:.8rem 1.1rem 1.1rem; border:7px solid #2a2c30; border-radius:2.7rem; background:white; box-shadow:0 18px 34px #25282c1a,inset 0 0 0 1px #d0d4d6; }
.phone-top { display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.65rem; font-weight:700; min-height:1.8rem; }
.phone-island { width:5.1rem; height:1.25rem; background:#1c1e21; border-radius:1rem; }
.phone-app { margin-top:1.2rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.phone-app > span { display:flex; gap:.4rem; align-items:center; font-size:.82rem; font-weight:600; }
.phone-app .ui-icon { width:1.1rem; height:1.1rem; }
.phone-app small { color:var(--muted); font-size:.7rem; }
.phone-messages { display:grid; gap:.8rem; margin:1.1rem 0; }
.message { max-width:91%; padding:.7rem .85rem; border-radius:1rem; font-size:.82rem; line-height:1.5; }
.message small { display:block; margin-bottom:.25rem; font-size:.56rem; font-weight:700; letter-spacing:.1em; }
.message-you { justify-self:end; color:white; background:#3b6580; border-bottom-right-radius:.25rem; }
.message-ai { background:#eef0f2; color:var(--ink); border-bottom-left-radius:.25rem; }
.voice-input { display:grid; grid-template-columns:2.5rem 1fr; align-items:center; gap:.25rem .65rem; padding:.8rem 0 0; border-top:1px solid var(--line); }
.voice-input > span { grid-row:span 2; display:grid; place-items:center; width:2.5rem; height:2.5rem; background:var(--ink); color:white; border-radius:50%; }
.voice-input .ui-icon { width:1.15rem; height:1.15rem; }
.voice-input small { font-size:.65rem; color:var(--muted); }
.voice-bars { display:flex; align-items:center; gap:4px; height:1rem; }
.voice-bars i { display:block; width:3px; height:35%; border-radius:3px; background:#596d7d; }
.voice-bars i:nth-child(3n) { height:100%; }.voice-bars i:nth-child(2n) { height:65%; }
.phone-bottom { margin:1rem auto 0; width:5.6rem; height:4px; background:#22252a; border-radius:3px; }
.email-visual { padding:2rem 1.5rem 1.4rem; background:#fff; }
.email-window { background:#fff; border:1px solid #cbd2d7; border-radius:.6rem; box-shadow:0 12px 30px #25282c0c; overflow:hidden; }
.window-bar { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.85rem 1rem; border-bottom:1px solid var(--line); background:#fafbfb; }
.window-bar > span:nth-child(2) { display:flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; }
.window-bar .ui-icon { width:1.1rem; height:1.1rem; }
.window-dots { color:#a6afb5; font-size:.65rem; letter-spacing:1px; }
.draft-state { color:var(--muted); font-size:.6rem; letter-spacing:.08em; }
.email-fields { padding:.5rem 1.2rem 0; font-size:.8rem; }
.email-fields p { padding:.55rem 0; border-bottom:1px solid var(--line); }
.email-fields span { display:inline-block; min-width:4rem; color:var(--muted); }
.email-body { padding:1.3rem 1.2rem; color:#434a50; font-size:.91rem; line-height:1.75; }
.email-body p + p { margin-top:1rem; }
.email-review { display:flex; align-items:center; gap:.5rem; padding:.9rem 1.2rem; border-top:1px solid var(--line); background:#fafbfb; font-size:.75rem; }
.email-review .ui-icon { width:1rem; height:1rem; }
.prompt-strip { display:flex; align-items:center; gap:.8rem; width:88%; margin:1rem auto 0; padding:.8rem 1rem; background:var(--ink); color:#fff; border-radius:.5rem; font-size:.85rem; line-height:1.5; }
.document-visual { display:grid; grid-template-columns:1fr 1.05fr; gap:0; align-items:center; padding:2rem 1.5rem 1.4rem; background:#f4f5f5; }
.source-paper,.summary-paper { background:#fff; border:1px solid #d1d7db; padding:1.3rem; }
.source-paper { transform:rotate(-3deg); padding-bottom:2.7rem; }
.summary-paper { margin-left:-1.2rem; transform:translateY(2rem); box-shadow:0 12px 28px #25282c14; }
.paper-heading { display:flex; align-items:center; gap:.35rem; font-size:.68rem; color:var(--muted); }
.paper-heading .ui-icon { width:1rem; height:1rem; }
.source-paper h3,.summary-paper h3 { font-size:1.08rem; line-height:1.3; margin-top:1.2rem; font-weight:600; letter-spacing:-.03em; }
.source-paper > p { margin-top:.5rem; color:var(--muted); font-size:.7rem; }
.paper-lines { display:grid; gap:8px; margin:1.3rem 0; }
.paper-lines i { height:5px; width:100%; background:#e2e5e7; }.paper-lines i:nth-child(3n) { width:80%; }.paper-lines i.highlight { background:#cad9e2; }
.source-paper .paper-excerpt { font-size:.74rem; line-height:1.7; }
.summary-paper ul { margin:1rem 0; padding-left:1rem; font-size:.81rem; color:#4f5860; }.summary-paper li + li { margin-top:.8rem; }
.source-check { display:flex; align-items:center; gap:.3rem; padding-top:.8rem; border-top:1px solid var(--line); font-size:.68rem; color:var(--muted); }.source-check .ui-icon { width:1rem; height:1rem; }
.document-visual figcaption { grid-column:1/-1; margin-top:3.4rem; }
.workday-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:4rem; align-items:center; padding:3rem 0; border-top:1px solid var(--line); }
.workday-intro h2 { margin-top:1rem; }.workday-intro > p:not(.eyebrow) { margin:1.3rem 0; max-width:27rem; color:var(--muted); }
.workday-section .sample-workday { border:1px solid var(--line); background:#fafbfb; }
.page-next { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1.5rem 0; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted); }
.page-next a { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.tools-panel { padding-top:3rem; }.tools-panel .learn { padding:2.5rem; margin-bottom:0; }
.tools-panel .brand-lab { border-top:0; padding:3rem 0; }
.platform-uses.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.4rem; font-size:.82rem; }
.platform-uses.feature-grid li { padding:.7rem 0; }.platform-uses.feature-grid li:last-child { border-bottom:1px solid var(--line); }
.platform-uses.feature-grid strong { font-size:.88rem; }
.platform-note { margin-top:1rem; color:var(--muted); font-size:.69rem; line-height:1.6; }.platform-note a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.stretch-section { margin-bottom:1rem; border:1px solid var(--line); }
.stretch-section > summary { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; cursor:pointer; padding:1.3rem 1.5rem; list-style:none; background:#fafbfb; }.stretch-section > summary::-webkit-details-marker { display:none; }
.stretch-section summary small { display:block; margin-bottom:.35rem; color:var(--muted); font-size:.66rem; font-weight:700; letter-spacing:.1em; }
.stretch-section summary strong { display:block; font-size:1.1rem; font-weight:600; line-height:1.4; letter-spacing:-.02em; }
.stretch-toggle { font-size:1.5rem; font-weight:400; }.stretch-section[open] .stretch-toggle { transform:rotate(45deg); }
.stretch-content { padding:1.5rem; }.stretch-content > p { max-width:48rem; color:var(--muted); }
.connected-flow { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:2rem 0; }
.connected-flow > div { flex:1; min-width:0; padding:1.2rem; border:1px solid var(--line); background:var(--wash); }.connected-flow strong { display:block; margin-top:.7rem; font-size:.9rem; }.connected-flow small { display:block; font-size:.78rem; color:var(--muted); }
.connected-flow > b { color:#7f8990; font-weight:400; font-size:1.4rem; }
.stretch-caption { font-size:.82rem; }.stretch-content .idea-path { padding:2rem 0 .5rem; margin:1.5rem 0 0; }
.stretch-content .idea-path h2 { font-size:2rem; }.stretch-content .learning-lab { padding:2rem 0 0; margin:0; }
.science-section .stretch-content { padding:1.5rem; }
.science-section .learning-lab-grid { grid-template-columns:minmax(0,1fr); max-width:48rem; }
.catchup-section .history-explorer { margin:0; padding:0; }
.catchup-section .history-heading > p:last-child { max-width:40rem; }
.catchup-section .history-main { grid-template-columns:minmax(0,1fr) 7.5rem; }
.catchup-section .history-story p,.catchup-section .history-spotlight h4 { max-width:46rem; }
.catchup-section .history-spotlight { min-height:17rem; }
.catchup-section .history-rail-wrap { overflow:visible; }
.catchup-section .history-rail { display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); gap:.55rem; width:auto; padding:1rem 0 0; }
.catchup-section .history-rail::before,.catchup-section .history-point-dot { display:none; }
.catchup-section .history-rail li { min-width:0; }
.catchup-section .history-point { min-height:4.4rem; padding:.75rem .85rem; border:1px solid var(--line); border-radius:.35rem; background:#fff; }
.catchup-section .history-point small { margin-top:0; }.catchup-section .history-point strong { max-width:none; }
.catchup-section .history-point[aria-pressed="true"] { border-color:var(--ink); background:var(--wash); }
.about[data-page] { padding:3.5rem 0 2rem; }.about[data-page] .about-photos { min-height:35rem; }
.book-panel { padding-top:3rem; }.book-panel .session-offer { margin:0 0 2rem; padding:2.5rem; }
.book-panel .session { padding:2.5rem; margin-bottom:3rem; }.book-panel .session-top { display:block; }.book-panel .session .section-intro { display:block; }.book-panel .session .section-intro h2 { font-size:2.4rem; margin:1rem 0; }.book-panel .session .section-intro > p:last-child { max-width:40rem; }
.book-panel .session-steps { margin-top:2rem; }.book-panel .faq { margin-bottom:3rem; }.book-panel .booking { padding-bottom:3rem; }.book-panel .contact { padding:2.5rem; }
.footer { border-top:1px solid var(--line); }.footer a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1000px) {
  .familiar-map,.workday-section { gap:2rem; }.example-scene { gap:2.5rem; }.scene-copy h2 { font-size:2.7rem; }.document-visual { padding:1.5rem 1rem; }.source-paper,.summary-paper { padding:1rem; }
  .about[data-page] .about-photos { min-height:29rem; }
}
@media(max-width:700px) {
  .project-walkthrough { padding:2.3rem 0; }.project-walkthrough-heading { grid-template-columns:1fr; gap:1rem; margin-bottom:1.5rem; }.official-walkthrough summary small { display:block; margin:.3rem 0 0; }
  .header { display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; padding-block:1.1rem .75rem; min-height:auto; }
  .header #page-tabs { display:flex; width:100%; justify-content:space-between; gap:.1rem; }
  #page-tabs a { padding:.55rem .7rem; font-size:.8rem; min-height:2.75rem; white-space:nowrap; }
  #page-tabs .book-tab { margin-left:0; gap:.35rem; }
  .hero { padding:2.3rem 0; gap:2rem; }.hero h1 { font-size:clamp(3.2rem,9vw,4.4rem); }.coast-photo img { aspect-ratio:1.5; }
  .familiar-map { grid-template-columns:1fr; gap:1rem; padding:2rem 0 0; }.interaction-map { padding:1.5rem 0; }.map-copy > p:not(.eyebrow) { max-width:100%; }
  .page-heading { padding:2.3rem 0 2rem; }.page-heading h1 { font-size:clamp(2.7rem,8vw,3.7rem); }.page-heading > p:last-child { font-size:1rem; }
  .example-scene,.email-scene { grid-template-columns:1fr; gap:2rem; padding:2.2rem 0; }.email-scene .scene-copy { grid-row:1; }.scene-copy > p { max-width:100%; }.scene-copy h2 { font-size:2.9rem; }.scene-note { margin-top:1rem; }
  .voice-scene .scene-visual { grid-row:1; }
  .phone-scene { padding:1.6rem 1rem 1.2rem; }.email-visual { padding:1.4rem 1rem 1rem; }.email-body { font-size:.87rem; }
  .document-visual { padding:1.7rem 1rem 1rem; }.source-paper,.summary-paper { padding:.9rem; }.summary-paper h3 { font-size:1rem; }.source-paper h3 { font-size:1rem; }
  .workday-section { grid-template-columns:1fr; gap:1.5rem; padding:2.2rem 0; }.workday-intro h2 { font-size:2.8rem; }
  .tools-panel,.book-panel { padding-top:2rem; }.tools-panel .learn { padding:1.4rem 1.1rem; }.tools-panel .brand-lab { padding:2.5rem 0; }
  .stretch-section > summary { padding:1rem; }.stretch-content,.science-section .stretch-content { padding:1rem; }.stretch-section summary strong { font-size:1rem; }
  .connected-flow { flex-direction:column; align-items:stretch; gap:.6rem; margin:1.5rem 0; }.connected-flow > b { align-self:center; transform:rotate(90deg); }.connected-flow > div { padding:1rem; }
  .about[data-page] { padding:2.5rem 0 1rem; }.about[data-page] .about-photos { min-height:0; }
  .book-panel .session-offer,.book-panel .session,.book-panel .contact { padding:1.5rem; }.book-panel .session-offer { gap:1.7rem; }.book-panel .faq { gap:1.5rem; }.book-panel .contact-links { min-width:0; }
}
@media(max-width:390px) {
  #page-tabs a { padding:.55rem .45rem; font-size:.76rem; }#page-tabs .book-tab span { display:none; }
  .map-branches { gap:.5rem; }.map-branches small { font-size:.68rem; }.map-branches strong { font-size:.75rem; }
  .document-visual { grid-template-columns:1fr; gap:1rem; }.source-paper { transform:none; }.summary-paper { margin-left:1.5rem; transform:none; }.document-visual figcaption { margin-top:.5rem; }
  .window-dots { display:none; }.email-fields span { min-width:3.5rem; }.prompt-strip { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .stretch-toggle { transform:none !important; } }