/* Additive refinement of the existing illustrated Puck page. */
[data-app="puck"] #landing > .puck-ownership {
    --ink: var(--puck-ink);
    --ink-2: var(--puck-muted);
    --line: var(--puck-line);
    color: var(--puck-ink);
    font-family: var(--font-display);
    line-height: 1.55;
}
[data-app="puck"] #landing .puck-ownership :focus-visible {
    outline: 2px solid var(--puck-blue);
    outline-offset: 5px;
}
[data-app="puck"] .puck-hero__body { max-width: 33ch; font-size: clamp(1.12rem, 1.45vw, 1.4rem); }
[data-app="puck"] .puck-hero__note { font-family: var(--font-mono); font-size: .65rem; line-height: 1.7; }
.puck-editorial-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: end; padding-top: 3rem; border-top: 1px solid var(--puck-line); margin-bottom: 2.5rem; }
.puck-editorial-head h2, .puck-ownership h2 { margin: .75rem 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.5rem,4.5vw,4.4rem); letter-spacing: -.035em; line-height: 1.08; }
.puck-editorial-head > p { max-width: 34ch; margin: 0 0 .3rem auto; font-size: 1.24rem; color: var(--puck-muted); }
.puck-disclosure { color: var(--puck-quiet); font-family: var(--font-mono); font-size: .62rem; margin: 1.15rem 0 0; line-height: 1.7; }
[data-app="puck"] .puck-controls__inner { padding-block: 5rem; }
.puck-input-options { display: grid; gap: 1rem; margin-top: 2rem; }
.puck-input-options > div { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: .75rem; border-top: 1px solid rgb(200 214 222 / 25%); padding-top: 1rem; }
.puck-input-options span { font-family: var(--font-mono); font-size: .6rem; color: var(--puck-controls-muted); padding-top: .35rem; }
.puck-input-options h3 { margin: 0 0 .3rem; color: var(--puck-controls-ink); font-family: var(--font-display); font-size: 1.28rem; font-weight: 400; }
[data-app="puck"] .puck-input-options p { grid-column: 2; margin: 0; font-size: 1rem; max-width: 43ch; }
.puck-ownership { background: var(--puck-journey-bg); padding-block: clamp(5rem, 8vw, 8rem); }
.puck-ownership__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.puck-ownership__copy > p { margin: 1.75rem 0 1.5rem; max-width: 36ch; font-size: 1.2rem; color: var(--puck-muted); }
.puck-storage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.75rem 2rem; border: 1px solid var(--puck-line); border-radius: 16px; background: var(--puck-recessed); }
.puck-storage__side p { color: var(--puck-muted); margin: .6rem 0 0; font-size: 1rem; max-width: 30ch; }
.puck-storage__side .puck-eyebrow { display: block; }
.puck-storage__bridge { display: flex; flex-direction: column; gap: .6rem; align-items: center; align-self: stretch; justify-content: center; color: var(--puck-quiet); font-family: var(--font-mono); font-size: .59rem; letter-spacing: .08em; }
.puck-storage__bridge span { width: 1px; flex: 1; min-height: 1.5rem; background: var(--puck-line); }
.puck-fineprint { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--puck-line); }
.puck-fineprint h3 { margin: 0 0 1rem; font-family: var(--font-mono); font-size: .62rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--puck-quiet); }
.puck-fineprint ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; max-width: 72ch; }
.puck-fineprint li { color: var(--puck-quiet); font-family: var(--font-mono); font-size: .62rem; line-height: 1.7; }
@media (max-width: 760px) {
    .puck-editorial-head, .puck-ownership__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .puck-editorial-head > p { margin-left: 0; font-size: 1.1rem; }
    [data-app="puck"] .puck-controls__inner { padding-bottom: 0; gap: 1rem; }
    .puck-ownership__inner { gap: 2.5rem; }
    .puck-storage { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
    .puck-storage__bridge { flex-direction: row; align-self: auto; }
    .puck-storage__bridge span { width: auto; height: 1px; min-height: 0; }
}
/* Keep all four product links visible on phones, with no sideways nav scroll. */
@media (max-width: 600px) {
    html[data-app="puck"] { --product-nav-height: 109px; }
    [data-app="puck"] .product-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 44px; gap: 4px .5rem; padding: 8px 1rem; overflow: visible; }
    [data-app="puck"] .product-nav__identity { grid-column: 1; grid-row: 1; }
    [data-app="puck"] .product-nav__lockup svg { height: 1.15rem; }
    [data-app="puck"] .product-nav__status { grid-column: 2; grid-row: 1; font-size: .55rem; }
    [data-app="puck"] .product-nav__links { grid-column: 1 / -1; grid-row: 2; margin: 0; justify-content: space-between; gap: .4rem; }
    [data-app="puck"] .product-nav__links a { padding-block: .55rem; font-size: .57rem; letter-spacing: .025em; }
    [data-app="puck"] .product-nav__links a:last-child { flex: 1; min-width: 0; white-space: normal; text-align: right; justify-content: flex-end; }
}

[data-app="puck"] .puck-hero h1 span { display: block; }
@media (max-width: 400px) {
    [data-app="puck"] .puck-hero h1 { font-size: clamp(2.35rem, 10.6vw, 2.65rem); max-width: none; letter-spacing: -.045em; }
    [data-app="puck"] #landing .puck-hero__actions .btn { padding-inline: .7rem; font-size: .6rem; }
}
[data-app="puck"] .puck-controls h2 { max-width: 15ch; font-size: clamp(2.8rem, 4.8vw, 4.8rem); }

/* Compact USB / Wi-Fi guidance inside the compatibility section. */
.puck-connect { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--puck-line); }
.puck-connect > h3 { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.03em; color: var(--puck-ink); }
.puck-connect__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.puck-connect__row article { border: 1px solid var(--puck-line); border-radius: 8px; background: var(--puck-surface); padding: 1.5rem; }
.puck-connect__row h4 { margin: .6rem 0 .5rem; font-size: 1.25rem; font-weight: 400; font-family: var(--font-display); color: var(--puck-ink); }
.puck-connect__row p { margin: 0; color: var(--puck-muted); font-size: 1rem; }
@media (max-width: 700px) { .puck-connect__row { grid-template-columns: 1fr; } }

/* Device line art and the native app icon collection. */
.puck-line-art { display: block; width: 100%; max-width: 200px; height: auto; color: var(--puck-blue); }
[data-app="puck"] .compatibility__item { position: relative; overflow: hidden; border: 1px solid var(--puck-line); border-radius: 10px; padding: 1.5rem; background: var(--puck-surface); }
[data-app="puck"] .compatibility__item > .puck-line-art { margin: 1rem auto 1.5rem; width: 150px; height: 115px; }
[data-app="puck"] #landing > .puck-icon-story { background: var(--puck-library-bg); color: var(--puck-ink); padding-block: clamp(5rem,8vw,8rem); font-family: var(--font-display); line-height: 1.55; }
@media(max-width:760px) {
 .puck-icon-choices { grid-template-columns: repeat(3,1fr); gap: .75rem; }
 .puck-icon-choices img { max-width: 92px; margin: auto; }
 .puck-icon-choices span { font-size: .6rem; }
}

/* Pasture's icon workbench: full collection, selected preview, appearance and detail controls. */
.puck-icon-workbench { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 3.5rem; align-items: start; }
.puck-icon-selection { text-align: center; position: sticky; top: calc(var(--product-nav-height, 4rem) + 6rem); padding-top: 4rem; }
.puck-icon-selection figure { margin: 0; }
.puck-dock-preview { display: grid; place-items: center; aspect-ratio: 1; background: var(--puck-recessed); border: 1px solid var(--puck-line); border-radius: 16px; }
.puck-dock-preview img { display: block; width: 88%; height: auto; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 8%)); }
.puck-icon-selection figcaption { font: .7rem/1.7 var(--font-mono); margin: 1.4rem 0 .7rem; min-height: 3.5em; }
.puck-icon-selection > .puck-eyebrow { font-size: .52rem; }
.puck-icon-browser { min-width: 0; }
.puck-icon-tools { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.puck-icon-tools[hidden] { display: none; }
.puck-icon-appearance { display: inline-flex; border: 1px solid var(--puck-line); border-radius: 5px; overflow: hidden; }
.puck-icon-appearance button { border: 0; background: transparent; color: var(--puck-muted); padding: .7rem 1rem; min-height: 44px; font: .7rem var(--font-mono); cursor: pointer; }
.puck-icon-appearance button[aria-pressed="true"] { background: var(--puck-ink); color: var(--puck-surface); }
.puck-icon-lettering { display: flex; gap: .6rem; align-items: center; font: .65rem/1.5 var(--font-mono); min-height: 44px; cursor: pointer; }
.puck-icon-lettering input { width: 17px; height: 17px; accent-color: var(--puck-blue); }
.puck-icon-choices { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; }
.puck-icon-choices button { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 0; border: 1px solid transparent; border-radius: 7px; padding: .5rem .25rem .7rem; background: transparent; color: var(--puck-muted); cursor: pointer; }
.puck-icon-choices button:hover, .puck-icon-choices button[aria-pressed="true"] { background: var(--puck-recessed); color: var(--puck-ink); }
.puck-icon-choices button[aria-pressed="true"] { border-color: var(--puck-blue); }
.puck-icon-workbench :focus-visible { outline: 2px solid var(--puck-blue); outline-offset: 3px; }
.puck-icon-choices img { display: block; width: min(100%,96px); height: auto; }
.puck-icon-choices span { font: .57rem/1.5 var(--font-mono); text-align: center; }
.puck-icon-footnote { border-top: 1px solid var(--puck-line); margin-top: 2rem; padding-top: 1.5rem; }
.puck-icon-footnote > p:first-child { font-size: 1.1rem; margin: 0; color: var(--puck-muted); }
.puck-icon-footnote .puck-disclosure { max-width: 110ch; }
@media(max-width:900px) {
 .puck-icon-workbench { grid-template-columns: 200px minmax(0,1fr); gap: 1.8rem; }
 .puck-icon-choices { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .puck-icon-workbench { grid-template-columns: 1fr; gap: 2rem; }
 .puck-icon-selection { position: static; padding-top: 0; max-width: 230px; margin: auto; }
 .puck-icon-choices { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .puck-icon-tools { flex-wrap: wrap; gap: .5rem; }
}

/* Match Pasture: compact controls belong with the selected icon. */
.puck-icon-selection { padding-top: 0; }
.puck-icon-selection .puck-icon-tools { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.puck-icon-selection .puck-icon-tools[hidden] { display: none; }
.puck-icon-appearance { border-radius: 4px; }
.puck-icon-appearance button { min-height: 36px; padding: 6px 14px; font-size: .65rem; cursor: pointer; }
.puck-icon-appearance button + button { border-left: 1px solid var(--puck-line); }
.puck-icon-appearance button:focus-visible { outline-offset: -4px; outline-color: currentColor; }
.puck-icon-lettering { gap: 9px; min-height: 36px; font-size: .65rem; }
.puck-icon-lettering input { width: 14px; height: 14px; margin: 0; accent-color: var(--puck-ink); cursor: pointer; }
.puck-icon-selection figcaption { margin: 1rem 0 .75rem; min-height: 3.4em; }

/* Compact phone selection stays in view while browsing the expanded collection. */
.puck-icon-expand { display:none; }
[data-app="puck"] #landing { scroll-margin-top:calc(var(--chrome-top) + var(--product-nav-height, 3.25rem)); }
.puck-icon-workbench { scroll-margin-top:calc(var(--chrome-top) + var(--product-nav-height, 3.25rem) + 1rem); }
@media (max-width:600px) {
 .puck-icon-workbench { gap:1rem; }
 .puck-icon-selection { position:sticky; top:calc(var(--chrome-top) + var(--product-nav-height, 3.25rem)); z-index:4; width:100%; max-width:none; margin:0; padding:.75rem 0; background:var(--puck-library-bg); border-bottom:1px solid var(--puck-line); display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:.5rem 1rem; }
 .puck-icon-selection figure { display:contents; }
 .puck-icon-selection .puck-dock-preview { grid-column:1; grid-row:1; border-radius:10px; }
 .puck-icon-selection figcaption { grid-column:1 / -1; grid-row:2; margin:0; min-height:0; text-align:left; font-size:.65rem; line-height:1.5; }
 .puck-icon-selection > .puck-eyebrow { display:none; }
 .puck-icon-selection .puck-icon-tools { grid-column:2; grid-row:1; justify-self:end; margin:0; gap:.2rem; }
 .puck-icon-appearance button { min-height:44px; padding:.5rem .7rem; }
 .puck-icon-lettering { min-height:44px; }
 .puck-icon-choices button { scroll-margin-top:calc(var(--chrome-top) + var(--product-nav-height, 3.25rem) + 8rem); }
 .puck-icon-workbench[data-enhanced="true"]:not([data-expanded="true"]) .puck-icon-choices button:nth-child(n+7) { display:none; }
 .puck-icon-expand:not([hidden]) { display:block; margin:1rem auto 0; min-height:44px; padding:.65rem 1rem; background:transparent; border:1px solid var(--puck-line); border-radius:5px; color:var(--puck-ink); font:.75rem var(--font-mono); cursor:pointer; }
}